如何使用SVG滤镜创建透明度渐变蒙版

我目前使用SVG渐变来为路径应用淡出效果。这样的路径，以100％的不透明度开始在X0和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="..." style="stroke:url(#gradient_to_transparent);"></path>

但问题是，通过使用笔画风格我不能应用其他笔画风格，它默认为黑色。我想要的是使用任何我想要的颜色对笔画进行风格设置，然后对笔触不透明度应用渐变或应用SVG滤镜来创建淡出效果。我尝试着使用SVG过滤器和feFuncA使用feComponentTransfer，但无法获得正确的工作。

笔画颜色需要为每个路径单独计算。所以，在渐变中设置颜色的解决方案不会很好地伸缩。

来源

2014-02-06 drarmstr

它需要是渐变或过滤器吗？我建议使用，其中包含应用了渐变的矩形，但我不确定您的要求。一个例子：http://xn--dahlstrm-t4a.net/svg/presentations/svgdemos/relect-text-mask.svg –

@ErikDahlström，你应该发布这个答案，因为它看起来像一个很好的解决方案。不过，计算弯曲路径的掩码大小和位置有一些复杂性。 – drarmstr

它需要是渐变还是过滤器？我建议使用包含应用了渐变的矩形的<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。

来源

2014-02-21 08:27:37

这种方法效果很好。但是，请注意，掩码大小和路径有复杂性。根据开始点和结束点的x，y位置计算路径的边界框。弯曲的路径或粗的行程宽度可能会延伸到此框的外部。因此，我不得不使用mask和rect以负x，y开始，并使用比对象边界框大几千倍的宽度和高度。这样做时，linearGradient停止点也必须进行调整，以使停止点与路径的端点对齐，而不是与掩码的边缘对齐。 – drarmstr

还有一个水平或垂直线条的边框，边界框没有高度或宽度。对于这种情况，我必须抖动端点，以便有一个微小的斜率，然后真正确保面罩的数万倍以上，以处理可能有数百个像素宽度的笔画宽度。 – drarmstr

如何使用SVG滤镜创建透明度渐变蒙版

回答

相关问题