具有多个渐变的SVG透明度

Question

我试图找出4向梯度填充的最佳模型.我的最新型号是这个小提琴:

<svg height="360" width="400" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <clipPath id="C">
      <path d="M 100 200 L 300 58 L 400 250 L 300 341 Z" />
    </clipPath>
    <radialGradient id="G1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%"   style="stop-color:rgb(255,0,0);    stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(128,128,64); stop-opacity:0" />
    </radialGradient>
    <radialGradient id="G2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%"   style="stop-color:rgb(0,255,0);    stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(128,128,64); stop-opacity:0" />
    </radialGradient>
    <radialGradient id="G3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%"   style="stop-color:rgb(0,0,255);    stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(128,128,64); stop-opacity:0" />
    </radialGradient>
    <radialGradient id="G4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%"   style="stop-color:rgb(255,255,0);  stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(128,128,64); stop-opacity:0" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="200" rx="200" ry="200" clip-path="url(#C)" fill="url(#G1)" />
  <ellipse cx="300" cy="58"  rx="200" ry="200" clip-path="url(#C)" fill="url(#G2)" />
  <ellipse cx="400" cy="250" rx="200" ry="200" clip-path="url(#C)" fill="url(#G3)" />
  <ellipse cx="300" cy="341" rx="200" ry="200" clip-path="url(#C)" fill="url(#G4)" />
</svg>

结果如下:

但是当我改变<ellipse>元素的顺序时(见这个小提琴):

  <ellipse cx="100" cy="200" rx="200" ry="200" clip-path="url(#C)" fill="url(#G1)" />
  <ellipse cx="300" cy="58"  rx="200" ry="200" clip-path="url(#C)" fill="url(#G2)" />
  <ellipse cx="300" cy="341" rx="200" ry="200" clip-path="url(#C)" fill="url(#G4)" />
  <ellipse cx="400" cy="250" rx="200" ry="200" clip-path="url(#C)" fill="url(#G3)" />

结果变为:

这意味着透明度的计算方式不同.无论元素的顺序如何,我都希望计算透明度始终具有相同的结果.这个问题的解决方案是什么？

Answer 1

在该表面上的任何给定点处,通过在其堆叠顺序中考虑覆盖该点的所有元素来计算最终颜色.SVG中始终存在堆叠顺序,您不能将所有渐变视为整体.

真正的4向渐变必须在每个点处具有混合的颜色,每种颜色的量等于在该特定点处从颜色源到形状边缘的距离的百分比.但是堆叠层无法获得,这就是原因:

假设您的图层具有从颜色到透明的均匀过渡,并且图层顺序为红色,绿色,蓝色,黄色,底部为红色,顶部为黄色,则中间的一个点将大致为

 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),但方程必须站在表面上的每个点上,我怀疑你能用简单的径向得到一个有效的答案或线性渐变.