将不透明度应用于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到.5到0.3之间的任何不透明度，以及0.5到1.0到0.6之间的任何不透明度。对于不同颜色，更通用的方法是使用feFlood和feComposite。