将不透明度应用于 SVG

Question

有填充不透明度和描边不透明度属性，但两个透明度重叠，因此我的描边的不透明度更重要。如何删除这种重叠（具有不同的不透明度）？

mysvg
.attr('fill', 'rgba(150, 150, 150, 0.3)')
.attr('stroke-width', '30px')
.attr('stroke', 'rgba(150, 150, 150, 0.6)');

我没有 10 声望... See the result here

Answer 1

有几种方法可以做我认为你想做的事。最简单的方法是只绘制两个形状 - 一个按笔划宽度缩小的实心形状，然后是一个顶部有笔划的零填充形状。

但是，由于您对两者使用相同的颜色，因此使用过滤器很容易得到您想要的。

<filter id="opacityceiling">
  <feComponentTransfer>
    <feFuncA type="discrete" tableValues="0.3 0.6"/>
  </feComponentTransfer>
</filter>

这会将 0 到 0.5 到 0.3 之间的任何不透明度以及 0.5 到 1.0 到 0.6 之间的任何不透明度钳制。不同颜色的更通用方法是使用 feFlood 和 feComposite。