1

考虑一个带有两个部分重叠的圆圈的 SVG，两者都带有fill="currentColor". 我不控制当前颜色的值，它可以通过我无法控制的代码设置为任何值。

我希望整个图形具有相同的纯色。如果图像碰巧有例如color: red. 但是，当当前颜色具有 Alpha 通道时，圆圈重叠的部分会变暗。

我想避免这种情况。基本上，我想让第一个图像看起来像这个例子中的第二个：

<svg viewBox="0 0 10 10" style="color: rgba(0,0,0,50%); width: 100px;">
    <circle cx="3" cy="5" r="3" fill="currentColor"></circle>
    <circle cx="7" cy="5" r="3" fill="currentColor"></circle>
</svg>
<svg viewBox="0 0 10 10" style="color: rgb(50%,50%,50%); width: 100px;">
    <circle cx="3" cy="5" r="3" fill="currentColor"></circle>
    <circle cx="7" cy="5" r="3" fill="currentColor"></circle>
</svg>

这是否可以实现，也许使用混合模式？

4

2 回答 2

2

实现您想要的一个简单方法就是将圆圈变成剪切路径。

<svg viewBox="0 0 10 10" style="color: rgba(0,0,0,50%); width: 100px;">
  <defs>
    <clipPath id="myClip">
      <circle cx="3" cy="5" r="3"></circle>
      <circle cx="7" cy="5" r="3"></circle>
    </clipPath>
  </defs>
  <rect width="100%" height="100%" fill="currentColor" clip-path="url(#myClip)"/>
</svg>

于 2018-10-19T06:51:10.557 回答
1

如果您的目标是简单地将颜色移动到完全不透明度，则可以使用相对简单的过滤器来实现：

<svg viewBox="0 0 10 10" style="color: rgba(0,0,0,50%); width: 100px;">
    <filter id="filter">
        <feComponentTransfer in="SourceGraphic">
            <feFuncA type="linear" slope="100"/>
        </feComponentTransfer>
    </filter>
    <circle cx="3" cy="5" r="3" fill="currentColor" style="filter:url(#filter)"></circle>
    <circle cx="7" cy="5" r="3" fill="currentColor" style="filter:url(#filter)"></circle>
</svg>
<svg viewBox="0 0 10 10" style="color: rgb(50%,50%,50%); width: 100px;">
    <circle cx="3" cy="5" r="3" fill="currentColor"></circle>
    <circle cx="7" cy="5" r="3" fill="currentColor"></circle>
</svg>

如果，如您所描述的，您想在彩色背景上模拟透明度的效果，它有点复杂，结果也不是很完美。

下面分别在每个彩色对象的轮廓后面添加一个白色背景。

但请注意两个属性：

  • color-interpolation-filters:sRGB需要正确的颜色添加
  • 没有shape-rendering:crispEdges你会得到一些物体重叠的人工制品。但是设置它是有代价的：你到处都失去了抗锯齿。根据使用的形状，这可能非常明显。

<svg viewBox="0 0 10 10" style="color: rgba(0,0,0,50%); width: 100px; shape-rendering:crispEdges">
    <filter id="filter" style="color-interpolation-filters:sRGB">
        <feFlood flood-color="#fff" flood-opacity="1" result="bg" />
        <feComponentTransfer in="SourceGraphic" result="opaque">
            <feFuncA type="linear" slope="100"/>
        </feComponentTransfer>
        <feComposite in="bg" in2="opaque" operator="in" result="combine" />
        <feComposite in="SourceGraphic" in2="combine" operator="atop" />
    </filter>
    <circle cx="3" cy="5" r="3" fill="currentColor" style="filter:url(#filter)"></circle>
    <circle cx="7" cy="5" r="3" fill="currentColor" style="filter:url(#filter)"></circle>
</svg>
<svg viewBox="0 0 10 10" style="color: rgb(50%,50%,50%); width: 100px;">
    <circle cx="3" cy="5" r="3" fill="currentColor"></circle>
    <circle cx="7" cy="5" r="3" fill="currentColor"></circle>
</svg>

于 2018-10-19T02:45:33.053 回答