5

我正在尝试找出 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)" />

结果更改为：

在此处输入图像描述

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

4

1 回答 1

9

在该表面上的任何给定点，通过考虑覆盖该点的所有元素，按照它们的堆叠顺序计算最终颜色。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），但方程必须站在表面上的每个点上，我怀疑你能用简单的径向得到一个有效的答案或线性渐变。

于 2012-06-26T16:33:35.067 回答