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 に答える