2012-03-10 15 views
2

SVG線形勾配仕様について多少混乱します。私は、45度で傾斜した直線勾配の100x100矩形を塗りたいとします。簡単な方法は、x1 = 0、y1 = 0、x2 = 100、y2 = 100のような勾配点を指定することです。しかし、私は、x1 = 86、y1 = 0、x2 = 100、y2 = 14のような点を提供するときに何が起こるかについてはっきりしていません。勾配ベクトルは前のものとまだ平行ですが、勾配ベクトルの長さは境界ボックス全体をカバーします。だから、私は次の疑問を持っています:SVG線形勾配定義

  1. これら2つの勾配の定義は同じですか?
  2. 2番目のケースでは、svg standardは100,100などの点で何が起こるかを指定していますが、勾配ベクトルの外挿した色を使用しますか?
  3. 私はsvgグラデーションが属性spreadMethodを持っていることを知っていますが、ドキュメンテーションによると、グラデーションがターゲット矩形の境界内で開始または終了した場合にのみ役割を果たします。 2番目の定義は同じではないため(開始点と終了点は境界線の端にあります)、spreadMethodはここでも役割を果たしますか? specから

答えて

3

文:「勾配起動した場合に何が起こるかを示し、またはターゲット矩形の境界の内側に終了」単に勾配ベクトルのエンドポイントがターゲット矩形の外側にある場合に目に見える効果がないという事実を強調する。 グラディエントとその属性は、勾配ベクトルのエンドポイントがどこにあるかにかかわらず、まったく同じように動作します。バウンディングボックスの内側、外側、または正確です。より詳細には

この質問に関連している2つの勾配の属性があります。

  • gradient vectorspreadMethodreflectまたはrepeatである場合にのみ、勾配の「サイズ」を決定します。それ以外の場合、勾配「サイズ」は、spreadMethodpad(デフォルト)の場合、境界ボックスによって決定されます。もちろん、勾配ベクトルは常に勾配の方向を決定する。
  • spreadMethod属性は、グラデーションが繰り返されるかどうか、およびそれが繰り返されるかどうかを決定します(最初の停止または最後の停止から再び開始しますか?)。勾配ベクトルが境界ボックスのサイズに「パディング」されている場合は、繰り返す必要はありません。


特にご質問にお答えするには:

  1. spreadMethodpadのとき:はい、彼らは同じです。そうでない場合:いいえ
  2. はい、上記のとおりです。

  3. はい、pad以外にspreadMethodを設定すると、2つの効果を持つことになります。グラデーションのサイズは、バウンディングボックスからベクターのサイズに縮小されます

    b。勾配はspreadMethod属性ここ

の値に基づいて繰り返されますpadrepeat、そしてreflectの差の素敵なイラストです。

enter image description here

:線分は、勾配ベクトルを表し、今のところSVG Essentials/Patterns and Gradients

+0

'spreadMethod'属性がまだのSafariもWebKitの最新バージョンでサポートされていないことに注意してください。 –

関連する問題