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

Question

我目前正在使用 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 一起使用，但无法获得正确的结果。

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

Answer 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 width="1" height="1" 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。