小编dra*_*str的帖子

我目前正在使用SVG渐变来为路径应用淡出效果.这允许路径在x0处以100%不透明度开始,在x1处淡出为0%,无论它们应用于应用于的特定路径:

<svg>
    <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="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
        style="stroke:url(#gradient_to_transparent);"
    />
</svg>

这适用于路径的笔触样式:

<svg>
    <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="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
        style="stroke:url(#gradient_to_transparent);"
    />
</svg>

但问题是,通过使用笔触样式,我无法应用其他笔触样式,并且默认为黑色.我想要的是使用我想要的任何颜色设置笔划样式,然后将渐变应用于笔触不透明度或应用SVG过滤器来创建淡出效果.我尝试搞乱SVG过滤器并使用feComponentTransfer和feFuncA,但是无法获得正常工作的东西.

需要针对每个路径单独计算笔划颜色.因此,在渐变中设置颜色的解决方案不会很好地扩展.