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

它需要是渐变还是滤镜？我建议使用包含应用渐变的rect的<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。

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

1 个答案: