元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【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>

original scale(3, 0.3)

  • 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>

original rotate(60, 40, 30)

  • 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>

original skewX(60) skewY(50)

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

変換の順序

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

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

まとめ

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