【SVG】座標系の変換:transform

要素が持つtransform属性に対して、変換を指定します。変換には「移動」「拡大・縮小」「回転」「剪断」があります。それぞれ、指定の仕方を見ていきます。

translation:移動

<symbol id="cross" stroke-width="3">
  <line x1="10" y1="20" x2="30" y2="20"/>
  <line x1="20" y1="10" x2="20" y2="30"/>
</symbol>
<use href="#cross" stroke="limegreen"/>
<use href="#cross" transform="translate(20, 30)"  stroke="navy"/>

• translate(tx, ty)
  • tx:x軸方向にtx移動
  • ty:y軸方向にty移動

scale:拡大・縮小

<symbol id="cross" stroke-width="3">
  <line x1="10" y1="50" x2="30" y2="50"/>
  <line x1="20" y1="40" x2="20" y2="60"/>
</symbol>
<use href="#cross" stroke="limegreen"/>
<use href="#cross" transform="scale(3, 0.3)" stroke="navy"/>
<g font-size="16" font-family="serif">
  <text x="24" y="58" fill="limegreen">original</text>
  <text x="60" y="24" fill="navy">scale(3, 0.3)</text>
</g>

• scale(sx, sy)
  • sx:x軸方向にsy倍
  • sy:y軸方向にsy倍

rotate:回転

<symbol id="cross" stroke-width="3">
  <line x1="20" y1="30" x2="60" y2="30"/>
  <line x1="40" y1="10" x2="40" y2="60"/>
</symbol>
<use href="#cross" stroke="limegreen"/>
<use href="#cross" transform="rotate(60, 40, 30)" stroke="navy"/>
<g font-size="16" font-family="serif">
  <text x="50" y="38" fill="limegreen">original</text>
  <text x="46" y="53" fill="navy">rotate(60, 40, 30)</text>
</g>

• rotate(θ, cx, cy)
  • θ:時計回りにθ度回転
  • cx:回転の中心点のx座標
  • cy:回転の中心点のy座標

skew:剪断(せんだん)

<symbol id="cross" stroke-width="3">
  <line x1="10" y1="20" x2="30" y2="20"/>
  <line x1="20" y1="10" x2="20" y2="30"/>
</symbol>
<use href="#cross" stroke="limegreen"/>
<use href="#cross" transform="skewX(60)" stroke="navy"/>
<use href="#cross" transform="skewY(50)" stroke="crimson"/>
<g font-size="16" font-family="serif">
  <text x="24" y="28" fill="limegreen">original</text>
  <text x="55" y="15" fill="navy">skewX(60)</text>
  <text x="33" y="58" fill="crimson">skewY(50)</text>
</g>

• skewX(θ)
  • x軸に沿ってθ度だけ傾ける
• skewY(θ)
  • y軸に沿ってθ度だけ傾ける

変換の順序

transform属性は、変換の設定を並列して記述することができる。この場合、右に記述したものから左に向かって順番に実行される。

<!--  scaleを実行してからtranslateを実行する-->
<g transform="translate(50, 20) scale(0.2, 0.4)"></g>

まとめ

• 移動:translation
• 拡大・縮小:scale
• 回転:rotate
• 剪断(せんだん):skew
• 変換の順序