Algorithm 具有多个渐变的SVG透明度

我试图找出四向梯度填充的最佳模型。我的最新型号是fiddle：

结果是：

但当我更改

元素的顺序时（请参阅fiddle）：

结果更改为：

---

这意味着透明度的计算方法不同。我希望无论元素的顺序如何，都能以相同的结果计算透明度。该问题的解决方案是什么？

在该曲面上的任何给定点，最终颜色的计算方法是将覆盖该点的所有元素按其堆叠顺序考虑在内。SVG中始终有一个堆叠顺序，不能将所有渐变作为一个整体

真正的四向渐变必须在每个点上具有一种颜色，该颜色的混合量等于从颜色源到该特定点的形状边缘的距离的百分比。但这无法通过堆叠层获得，原因如下：

假设你有从颜色到透明度的均匀过渡层，并且层顺序是红色、绿色、蓝色、黄色、底部红色和顶部黄色，那么中间的一个点将大致有

 50% yellow + 50% of the color below

变成

(50% yellow + 50%(50% blue + 50% of the color below))
->
(50% yellow + 50%(50% blue + 50%(50%green + 50%(50% red +50% background)))) 
->
(50%yellow + 25%blue + 12.5%green + 6.25%red)

这远远不是所有东西的50%

您可以尝试调整每个层变为透明的突然程度，知道最终的透明度不仅取决于该层的透明度，还取决于其上方层的不透明程度。所以，如果你想获得中间层中的25%层，那么你必须要解方程：

(y% yellow + (100-y)%(b% blue + (100-b)%(g% green + (100-g)%(r% red))))
=
(25% yellow + 25% blue + 25% green + 25% red)

---

虽然这个方程很容易求解（y=25，b=33.3，g=50，r=100），但这个方程必须位于曲面上的每个点上，我怀疑你能用简单的径向或线性梯度得到一个有效的答案。

我不知道你为什么期望结果不会不同？你没有任何东西是完全透明的，当然，如果你在上面有不同的元素，它看起来会不同。@ RoBrtc-寻找元素不被排序的解决方案，所以在同一层上，没有任何东西会在其他的顶部，等等。元素总是在SVG中排序。你能考虑WebGL吗？或者你是被SVG束缚住了？WebGL允许您为每条边指定一种颜色（您需要使用两个三角形构建此颜色）。

(50% yellow + 50%(50% blue + 50% of the color below))
->
(50% yellow + 50%(50% blue + 50%(50%green + 50%(50% red +50% background)))) 
->
(50%yellow + 25%blue + 12.5%green + 6.25%red)

(y% yellow + (100-y)%(b% blue + (100-b)%(g% green + (100-g)%(r% red))))
=
(25% yellow + 25% blue + 25% green + 25% red)