具有线性渐变的SVG线

时间:2014-09-16 11:46:41

标签: svg

我正在编写一个转换器工具,根据其他系统的信息创建SVG图像。另一个系统允许使用线性渐变填充创建路径。

Source

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

结果是:

Target

有人知道如何在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" />

0 个答案:

没有答案