SVG Rectangular and Path Gradient - svg

Question

I use radialGradient as below to give a tube bulb glow effect :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%"
viewBox="0 0 100 100">
<radialGradient id="radial" cx="50" cy="50" r="50"
gradientUnits="userSpaceOnUse">
<stop offset="0.8" style="stop-color:#00FFFF"/>
<stop offset="1" style="stop-color:#004444"/>
</radialGradient>
<circle cx="50" cy="50" r="50"
fill="url(#radial)"/>
</svg>
But how do I do same for Rectangular and Path Gradient or any Custom Shape Gradient for different shapes like rect or star ?
We have this option in MS PowerPoint which is called as Rectangular gradient and Path Gradient.
It shud start at center and first stop point 0.8 and second stop at 1 for each edge line just like above effect.
Are these gradients available in Illustrator?

Answer 1

You can fake it by splitting the shape into multiple sub-shapes.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%"
viewBox="0 0 100 100">
<linearGradient id="horiz" x1="0.5" spreadMethod="reflect">
<stop offset="0.8" style="stop-color:#00FFFF"/>
<stop offset="1" style="stop-color:#004444"/>
</linearGradient>
<linearGradient id="vert" y1="0.5" x2="0" y2="1" spreadMethod="reflect">
<stop offset="0.8" style="stop-color:#00FFFF"/>
<stop offset="1" style="stop-color:#004444"/>
</linearGradient>
<polygon points="0,0, 100,100, 100,0, 0,100" fill="url(#horiz)"/>
<polygon points="0,0, 100,0, 0,100, 100,100" fill="url(#vert)"/>
</svg>
The way this works is that we have two hourglass-shaped polygons, and we apply linear gradients to each.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%"
viewBox="0 0 100 100">
<polygon points="0,0, 100,100, 100,0, 0,100" fill="gold"/>
<polygon points="0,0, 100,0, 0,100, 100,100" fill="green"/>
</svg>