我目前正在使用SVG渐变来为路径应用淡出效果.这允许路径在x0处以100％不透明度开始,在x1处淡出为0％,无论它们应用于应用于的特定路径：
<linearGradient id="gradient_to_transparent" x1="0%" x2="100%">
<stop offset="0" stop-opacity="1"></stop>
<stop offset="1" stop-opacity="0"></stop>
</linearGradient>
这适用于路径的笔触样式：
<path d="..." style="stroke:url(#gradient_to_transparent);"></path>
但问题是,通过使用笔触样式,我无法应用其他笔触样式,并且默认为黑色.我想要的是使用我想要的任何颜色设置笔划样式,然后将渐变应用于笔触不透明度或应用SVG过滤器来创建淡出效果.我尝试搞乱SVG过滤器并使用feComponentTransfer和feFuncA,但是无法获得正常工作的东西.
需要针对每个路径单独计算笔划颜色.因此,在渐变中设置颜色的解决方案不会很好地扩展.
解决方法
它需要是渐变还是滤镜？我建议使用< mask>包含应用了渐变的矩形,但我不确定您的要求.
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox="0 0 400 80"> <defs> <linearGradient id="fadeGrad" y2="1" x2="0"> <stop offset="0.5" stop-color="white" stop-opacity="0"/> <stop offset="1" stop-color="white" stop-opacity=".5"/> </linearGradient> <mask id="fade" maskContentUnits="objectBoundingBox"> <rect width="1" height="1" fill="url(#fadeGrad)"/> </mask> </defs> <rect width="100" height="100" fill="green" stroke="blue" mask="url(#fade)"/> </svg>
查看类似的示例here.
