Flashを使用してSVGグラデーションを表示しますか？

Question

AS3（Flash）を使用して SVGファイルを読み取り、表示しています。 問題は、線形/放射状のグラデーション

を正しく表示しています。

以下は、SVGでの赤から青への単純な線形グラデーションの例です。

<linearGradient id="GRADIENT_1" gradientUnits="userSpaceOnUse"
x1="107.3938" y1="515.5684" x2="105.2488" y2="428.8614"
gradientTransform="matrix(0.9988 0.0485 0.0485 -0.9988 0.8489 711.6634)">

    <stop  offset="0" style="stop-color:red"/>
    <stop  offset="1" style="stop-color:blue"/>

</linearGradient>

グラデーション（ストップのスタイル）から色と、グラデーション（ストップのオフセット）の間隔を読み取ることができました。

さて、適切な色と適切なスペースの間に素敵なグラデーションがありますが、< strong>回転またはスケールなし、およびそのオフ位置！。

答えは、 a < strong> Matrix をFlashのグラデーション関数に追加します。

---

方法1：提供されたマトリックスを使用する

マトリックスが提供 SVG、 gradientTransform = <！> quot; matrix（a、b、 c、d、e、f）<！> quot; は、その matrix をFlashの beginGradientFill（）関数 では、グラデーションが図形全体に引き延ばされるので、グラデーションの中央の色だけが、塗りつぶしのように見えます。

---

方法2：2つのグラデーションポイントを使用してマトリックスを生成する

• x1、y1 タグは、画面上でグラデーションの開始点になる場合があります。
• x2、y2 タグは、グラデーションが終了する画面上のポイントです。

<！> quot; 2つのグラデーションポイント<！> quot;と言うとき、x1、y1およびx2、y2を指します。 勾配開始<！> amp;終了。

マトリックスがあります。 createGradientBox（）関数。グラデーションで使用するマトリックスを作成しますが、パラメーターは SVGが提供するものとは非常に異なります。 欲しいもの：

1. 幅 --- 2つのグラデーションポイント間の相対距離をここで使用しました（X軸）
2. 高さ ---ここでは2つのグラデーションポイント間の相対距離（Y軸）を使用しましたが、誤った結果が得られました --- ここでは2つのグラデーションポイント間の距離が、幅に何を埋めるかわからなかった！
3. 回転角度-ラジアン単位の2つの勾配点の角度を使用し、誤った結果が出ました
4. Translation x -最初のグラデーションポイントのXを試し、0を試しました、誤った結果がありました！
5. 翻訳y -最初のグラデーションポイントのYを試し、0を試しました、誤った結果がありました！

---

Flashの勾配マトリックスを生成するために使用できるSVGデータは何ですか？

（上記のSVGスニペットをご覧ください。これはグラデーションを説明するすべてのデータです）

Answer 1

2つのグラデーションポイントを使用して線形グラデーションを描画する方法

1. x1、y1およびx2、y2 は、画面座標空間上の2つのポイントであり、グラデーションの描画元、描画先です。
2. SVGが提供する変換マトリックスを使用して、 x1、y1およびx2、y2ポイントをオフセットします。- gradientTransform = <！> quot; matrix（ a、b、c、d、e、f）
3. x1、y1からx2、y2へのグラデーションを描く

i.e。

  

x1、y1、x2、y2は、   から生じる座標系   現在のユーザー座標系を要素に配置する   グラデーションの参照（を介して   'fill'または 'stroke'プロパティ）   グラデーション要素が   参照し、次に適用します   属性で指定された変換   gradientTransform。

W3Cドキュメント経由。

Answer 2

SVGレンダリングエンジン！

おそらくこちらの回答があります。