我正在编写一个转换器工具,根据其他系统的信息创建SVG图像。另一个系统允许使用线性渐变填充创建路径。
我对SVG并不熟悉。我创建了一个线性渐变,如下所示:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="1000" width="1000"
xml:lang="de">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop stop-color="#32CD32" offset="0%"/>
<stop stop-color="#32CD32" offset="20%"/>
<stop stop-color="#FFAD5B" offset="50%"/>
<stop stop-color="#32CD32" offset="80%"/>
<stop stop-color="#32CD32" offset="100%"/>
</linearGradient>
</defs>
<polyline fill="none" points="710,183 628,310 758,395 734,256" stroke="url(#grad1)" stroke-width="20" stroke-linejoin="round" />
</svg>
结果是:
有人知道如何在SVG中实现渐变颜色作为源图像吗?
非常感谢你的帮助。
2014年10月20日更新: 我现在找到了解决方案。通过使用SVG滤波器,尤其是高斯模糊滤波器,可以解决这个问题。
<defs>
<filter id="filter_pipe3_2" x="-1" y="-1" width="4" height="4">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<polyline fill="none" stroke="#32cd32" stroke-linejoin="round" stroke-width="20" points="710,183 628,310 758,395 734,256" />
<polyline filter="url(#filter_pipe3_2)" fill="none" stroke="#ffad5b" stroke-linejoin="round" stroke-width="6.66667" points="710,183 628,310 758,395 734,256" />