サーチ…


備考

グラフィック要素は、 変換属性を追加することによって変更できます。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>

左上の原点が座標(0,0)でレンダリングされる代わりに、点(10,10)から下に右に表示されます。

要素の全グループを一緒に変換することができ、変換を互いに追加することができます。

<svg xmlns="http://www.w3.org/2000/svg">
    <g transform="rotate(45)">
        <rect x="0" y="0" width="30" height="30" />
        <circle cx="5" cy="5" r="5" transform="scale(3)" />
    </g>
</svg>

まず、円の各点は、円の中心を(15,15)の矩形の中央に持ち、半径を15に設定して、原点を基準にして3倍の倍率になります。次に、矩形と円は原点を中心に時計回りに45度回転します。

翻訳する

長方形を右に10単位、下に20単位移動する:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" />
</svg>

水平方向に0単位、上方に20単位移動します。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="20" width="30" height="30" transform="translate(0, -20)" />
</svg>

水平方向に10単位移動し、垂直方向に0単位移動:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="0" width="30" height="30" transform="translate(-10)" />
</svg>

規模

長方形を水平方向に2倍、垂直方向に0.5倍に拡大縮小します。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="40" height="40" transform="scale(2, 0.5)" />
</svg>

結果は次のようになります。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="5" width="80" height="20" />
</svg>

水平に矩形をミラーリングする:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="20" height="40" transform="scale(-1, 1)" />
</svg>

スケールは原点に関連して動作するので、これは

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="-20" y="0" width="20" height="40" />
</svg>

回転する

ポリゴンを時計回りに原点を中心に90度回転させます:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 15,20" transform="rotate(90)" />
</svg>

結果は次のようになります。

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 0,30 -20,15" />
</svg>

回転中心は明示的に与えることができます:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 15,20" transform="rotate(90, 15, 15)" />
</svg>

結果は次のようになります。

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="30,0 30,30 10,15" />
</svg>

スキューX、スキューY

ポリゴンを水平方向に45度傾ける:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>

結果は次のようになります。

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 60,30 30,30" />
</svg>

x値はx + y * tan(angle)として計算され、y値は変更されません

ポリゴンを垂直に30度傾ける:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>

結果は(丸めを許可する)

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>

x値は変化しないままであり、y値はy + x * tan(angle)として計算される。

マトリックス

ポリゴンに変換行列を適用する:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="matrix(1,0.6,-1.2,1,40,10)" />
</svg>

次のように行列(a、b、c、d、e、f)を適用することによって、すべての点(x、y)

┌ x_new ┐    ┌ a  c  e ┐ * ┌ x_old ┐   ┌ x_old * a + y_old * c + e ┐
└ y_new ┘ =  └ b  d  f ┘   │ y_old │ = └ x_old * b + y_old * d + f ┘
                           └   1   ┘

結果は次のようになります。

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="40,10 70,28 34,58 4,40" />
</svg>

複数の変換

変換は連結され、 右から左に適用されます

長方形を90度回転させ、次に20単位ずつ右に20単位移動します。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="-10" y="-20" width="20" height="40"
        transform="translate(20 20) rotate(90)" />
</svg>

結果は次のようになります。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="10" width="40" height="20" />
</svg>


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow