SVG 矩形和路径渐变
SVG Rectangular and Path Gradient
我使用如下的 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>
但是我如何为矩形和路径渐变或任何自定义形状渐变为不同形状(如矩形或星形)做同样的事情?
我们在 MS PowerPoint 中有这个选项,称为矩形渐变和路径渐变。
它应该从中心开始,第一个停止点为 0.8,第二个停止点为 1,就像上面的效果一样。
这些渐变在 Illustrator 中可用吗?
您可以通过将形状拆分为多个子形状来伪造它。
<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>
我使用如下的 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>
但是我如何为矩形和路径渐变或任何自定义形状渐变为不同形状(如矩形或星形)做同样的事情?
我们在 MS PowerPoint 中有这个选项,称为矩形渐变和路径渐变。
它应该从中心开始,第一个停止点为 0.8,第二个停止点为 1,就像上面的效果一样。
这些渐变在 Illustrator 中可用吗?
您可以通过将形状拆分为多个子形状来伪造它。
<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>