5

検索しましたが、これに対する答えが見つかりません。たとえば、SVG で定義されたグラデーションがあるとします。

<linearGradient id="myCustomGradient" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="80%" style="stop-color: #4D4D94;" />
    <stop offset="100%" style="stop-color: #FFFFFF;" />
</linearGradient>

次のようなことを行うことで、それを形状で使用できます。

<rect x="0" y="0" width="100" height="50" style="fill: url(#myCustomGradient)" />

...これにより、上部の青から下部の白への素敵なグラデーションを持つ長方形が作成されます。

ここで、グラデーションが同じで反対方向(つまり、下部の青から上部の白へ)の形状を作成したいとします。既存のグラデーション定義を再利用することは可能ですが、何らかの方法で変換 (つまり反転) することはできますか?

属性については知っていgradientTransformますが、これは新しいグラデーションを定義するときにのみ適用されるようです。

4

1 に答える 1

10

確かに、別のグラデーションを作成し、それとxlink:hrefを最初のグラデーションに与えます。例えば

<linearGradient id="myCustomRotatedGradient" xlink:href="#myCustomGradient" gradientTransform="rotate(180, 150, 25)"/>

設定しない属性は、参照されているグラデーションの属性を使用します。ストップを設定しない場合は、参照されているグラデーションストップも使用されます。

それを反転したい場合は、scale(-1)のgradientTransformの方がうまくいくかもしれません。

于 2012-12-20T18:49:06.113 に答える