Javascript SVG：显示重叠形状的平均颜色

这不同于，后者专门讨论添加剂混合。为此，只需设置

混合模式：screen

。就我所知，平均颜色没有混合模式。这个问题的答案可能涉及到使用过滤器，正如答案中提到的那样；但是问题出在哪里呢

我正在制作一个可以查看SVG数据的应用程序。SVG具有不同颜色的层，这些层包含各种形状/路径。图层和形状/路径的颜色被输入并改变

SVG示例可能如下所示：

<svg>
  <g fill="#ff0000" id="layer1">
    <path d="M0,50 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
  <g fill="#00ff00" id="layer2">
    <path d="M25,50 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
  <g fill="#0000ff" id="layer3">
    <path d="M12.5,75 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
  <!-- more layers... -->
</svg>

看起来像下图中的第一组圆圈（正常）

我想要的是能够切换“透明模式”，以便您可以看到隐藏在其他形状下面的形状。因此，如果一个区域中有两个形状重叠，则该区域的颜色应为两层颜色的平均值。如果只有一个形状没有重叠任何东西，颜色应该是图层的颜色平均而言，我的意思是，如果颜色“#00ff00”上方有一个颜色“#ff0000”，则生成的颜色应为“#7f7f00”。

我可以通过两次绘制所有内容来获得弱透明度效果（中间图片）：以完全不透明度绘制所有内容一次，然后在顶部以半不透明度再次绘制。但效果非常弱，不能真正显示颜色的真实“混合”

这张照片很有希望地解释了我想要的效果（右边的场景）：

---

只要最终结果看起来正确，我不介意使用黑客工具来实现这一点。

如果你喜欢黑客工具，你可以将两个

混合模式配对。

排除

和

相乘

路径{
混合模式：排除；
}
.乘法路径{
不透明度：0.5；
混合模式：倍增；
}

---

如果你在玩黑客游戏，你可以配对两个

混合模式

排除

和

相乘

路径{
混合模式：排除；
}
.乘法路径{
不透明度：0.5；
混合模式：倍增；
}

---

这不是完美的结果。但你可以有一个渐进的不透明

#第1层{
不透明度：1
}
#第二层{
不透明度：.7
}
#第3层{
不透明度：.5
}

---

这不是完美的结果。但你可以有一个渐进的不透明

#第1层{
不透明度：1
}
#第二层{
不透明度：.7
}
#第3层{
不透明度：.5
}

谢谢你，查尔斯！这个代码段在我的浏览器中工作，看起来应该是这样的！不过，要让这个解决方案发挥作用，我遇到了一些困难。当我将您发布的SVG和CSS复制到HTML文档中时，它看起来颜色不正确。这个代码相同的JSFIDLE看起来颜色也不一样：我不知道为什么它在代码段中工作，但在其他地方却不工作？另外，您是否介意解释一下为什么这样做？有趣的是，它确实适用于codepen:。然而，我仍然无法让它与我的计算机上的文件一起工作。我曾尝试将CSS放入外部文件，并将其内联，但它似乎希望看起来像我发布的JSFIDLE链接中那样。我不确定到底发生了什么。事实上，它在Firefox的所有情况下都有效。但在Edge中，它只在代码段和代码笔中起作用。有没有办法让它为Edge工作？这里发生了什么？谢谢你的帮助！作为参考，这就是这个解决方案在Edge中对我来说的样子：这个代码片段在Edge中似乎可以很好地工作。Win 10上的版本90.0.818.62（官方版本）（64位）。我可以确认它在较新的edge版本上也适用。在老款手机上，混合模式似乎是：在空白背景下，排除模式的效果不同。不同版本之间可能存在一些其他差异。不过，我仍然很好奇为什么它在所有情况下都能在codepen和stackoverflow代码段中工作。这个解决方案对我来说似乎很神奇。了解它的工作原理会很好！但它确实有用。谢谢你，查尔斯！这个代码段在我的浏览器中工作，看起来应该是这样的！不过，要让这个解决方案发挥作用，我遇到了一些困难。当我将您发布的SVG和CSS复制到HTML文档中时，它看起来颜色不正确。这个代码相同的JSFIDLE看起来颜色也不一样：我不知道为什么它在代码段中工作，但在其他地方却不工作？另外，您是否介意解释一下为什么这样做？有趣的是，它确实适用于codepen:。然而，我仍然无法让它与我的计算机上的文件一起工作。我曾尝试将CSS放入外部文件，并将其内联，但它似乎希望看起来像我发布的JSFIDLE链接中那样。我不确定到底发生了什么。事实上，它在Firefox的所有情况下都有效。但在Edge中，它只在代码段和代码笔中起作用。有没有办法让它为Edge工作？这里发生了什么？谢谢你的帮助！作为参考，这就是这个解决方案在Edge中对我来说的样子：这个代码片段在Edge中似乎可以很好地工作。Win 10上的版本90.0.818.62（官方版本）（64位）。我可以确认它在较新的edge版本上也适用。在老款手机上，混合模式似乎是：在空白背景下，排除模式的效果不同。不同版本之间可能存在一些其他差异。不过，我仍然很好奇为什么它在所有情况下都能在codepen和stackoverflow代码段中工作。这个解决方案对我来说似乎很神奇。了解它的工作原理会很好！但它确实有效。