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

Posted 2023-03-06

【中文标题】如何使用 SVG 滤镜创建透明渐变蒙版

【英文标题】：How to create a transparency gradient mask using an SVG filter

【发布时间】：2014-03-03 22:09:22

【问题描述】：

我目前正在使用 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 过滤器来创建淡出效果。我尝试使用 SVG 过滤器并将 feComponentTransfer 与 feFuncA 一起使用，但无法获得正确的结果。

需要为每条路径单独计算笔触颜色。因此，在渐变中设置颜色的解决方案不会很好地缩放。

【问题讨论】：

需要渐变还是滤镜？我建议使用一个 ，其中包含一个应用了渐变的矩形，但我不确定您的要求。一个例子：xn--dahlstrm-t4a.net/svg/presentations/svgdemos/…

@ErikDahlström，您应该将此作为答案发布，因为它看起来是一个很好的解决方案。不过，计算曲线路径的掩码大小和位置存在一些复杂性。

【参考方案1】：

需要渐变还是滤镜？我建议使用包含应用渐变的矩形的<mask>，但我不确定您的要求。

<svg>	
  <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   fill="url(#fadeGrad)"/>
    </mask>
  </defs>

  <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"
    fill="green"
    stroke="red"
    mask="url(#fade)"
  />
</svg>

查看类似的示例here。

【讨论】：

这种方法效果很好。但是，请注意，掩码大小和路径存在复杂性。路径的边界框是根据起点和终点的 x,y 位置计算的。弯曲的路径或粗笔画宽度可能会延伸到此框之外。因此，我实际上必须让蒙版和矩形从负 x、y 开始，并使用比对象边界框大数千倍的宽度和高度。执行此操作时，还必须调整线性渐变停止点，以使停止点与路径的端点对齐，而不是与蒙版的边缘对齐。

还有边界框没有高度或宽度的水平或垂直线的角落情况。对于这种情况，我必须抖动端点，以便有一个轻微的斜率，然后真正确保蒙版大几万倍以处理可能是数百像素宽的笔划宽度。

@drarmstr 您有可以分享该方法的示例的链接吗？

@JasonAxelson - 在 github.com/drarmstr/chartcollection 的 Sankey 可视化中