SVG矩形和路径梯度

Question

我使用radialGradient如下所示给出灯泡发光效果：

<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>

但是，对于矩形和路径渐变或任何自定义形状渐变，我如何对不同的形状（如rect或star）执行相同的操作？
我们在MS PowerPoint中有这个选项，称为矩形渐变和路径渐变。
它就像上面的效果一样，从中心和第一个停止点0.8开始，每个边缘线的第二个停止点为1。

Illustrator中是否提供这些渐变？

Answer 1

你可以通过将形状分成多个子形状来伪造它。

<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>

这种方法的工作方式是我们有两个沙漏形的多边形，我们对每个多边形应用线性渐变。

<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>