検索しましたが、これに対する答えが見つかりません。たとえば、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
ますが、これは新しいグラデーションを定義するときにのみ適用されるようです。