SVG／座標系変換

グラフィックの座標系変換（transform）
座標系の移動変換（translate）
座標系の拡大縮小（scale）
座標系の回転（rotate）
transform属性の変換を連結

グラフィックの座標系変換  transform 属性

transform属性は、描画対象のグラフィックの座標やサイズを変更せずに、座標系そのものを移動、伸縮、回転することでグラフィックの表示位置やサイズ、縦横比、角度を変えることができます。
transform属性には変換の方法を指定します。たとえば、座標系のオフセット移動はtranslateを指定し、XとYのオフセット値を指定します。
transform="translate(x, y)"
transform属性に指定する変換方法は以下が用意されています。
translate 座標系の移動
scale 座標系の拡大縮小
rotate 座標系の回転
skewX X座標軸を傾ける
skewY Y座標軸を傾ける

座標系の移動変換  translate 変換

座標系の原点を、XとY座標のそれぞれに指定するオフセット位置に移動します。
transform="translate(X座標の移動量, Y座標の移動量)"
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="square" stroke-width="2" stroke="blueviolet">
        <rect x="5" y="5" width="40" height="40"/>
        <rect x="15" y="15" width="20" height="20"/>
    </g>
    <use xlink:href="#square" transform="translate(40, 40)"
fill="yellow"/>
</svg>
Picture

座標系の拡大縮小  scale 変換

座標系の距離単位を、任意の倍率で拡大または縮小します。
倍率は、縦横比一律か、縦横個別の倍率で指定できます。
transform="scale(座標の倍率)"
transform="scale(X座標の倍率, Y座標の倍率)"
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <circle cx="40" cy="40" r="25" stroke="red" fill="none"/>
    <circle cx="40" cy="40" r="25"
        transform="scale(0.4)" stroke="blue" fill="none"/>
    <circle cx="40" cy="40" r="25"
        transform="scale(1.4, 0.7)" stroke="green" fill="none"/>
</svg>
Picture

座標系の回転  rotate 変換

座標系を、指定する角度で時計回りに回転します。
回転の中心はデフォルトでは原点（0, 0）ですが、中心座標を指定することもできます。角度に負の度数を指定した場合は半時計回りになります。
transform="rotate(角度)"
transform="rotate(角度, 回転の中心X, 回転の中心Y)"
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <rect x="30" y="30" width="40" height="20" fill="magenta"/>
    <rect x="30" y="30" width="40" height="20" fill="green"
        transform="rotate(45, 30, 30)"/>
</svg>
Picture

座標系の傾け  skewX skewY 変換

座標系のX軸またはY軸を、指定する角度で傾けます。
グラフィック全体が縦か横に斜めに傾いたように描画されます。
transform="skewX(角度)"
transform="skewY(角度)"
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <rect x="1" y="1" width="70" height="50"
        stroke="red" fill="none"/>
    <rect x="1" y="1" width="70" height="50" stroke="green"
        fill="none" opacity="0.5" transform="skewX(15)"/>
    <rect x="1" y="1" width="70" height="50" stroke="blue"
        fill="none" opacity="0.5" transform="skewY(15)"/>
</svg>
Picture

transform属性の変換を連結

transform属性に指定する変換は、複数掛け合わせることができます。
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="square" stroke-width="2" stroke="blueviolet">
        <rect x="5" y="5" width="40" height="40"/>
        <rect x="15" y="15" width="20" height="20"/>
    </g>
    <use xlink:href="#square" fill="gold"
        transform="translate(30, 30) rotate(30)"/>
</svg>
Picture