SVGによる座標変換サンプル

項目のみ表示/展開表示の切り替え

座標変換の概要

SVG図形は、tansform属性で移動、回転、変形を指定できる。

translate(x,y)

座標の移動
変換前の座標がX,Yとすると変換後の座標X',Y'は以下の式で示せる。
X'=X+x

rotate(角度)

原点を中心として座標を時計回りに回転させる。角度をαとし変換前の座標がX,Yとすると変換後の座標X',Y'は以下の式で示せる。
$X'=X \cos \alpha-Y \sin \alpha$
$Y'=X \sin \alpha+Y \cos \alpha$

rotate(角度,x,y)

x,yを中心として座標を時計回りに回転させる。角度をαとし変換前の座標がX,Yとすると変換後の座標X',Y'は以下の式で示せる。
$X'=(X-x) \cos \alpha-(Y-y) \sin \alpha+y$
$Y'=(X-x) \sin \alpha+(Y-y) \cos \alpha+y$

scale(x,y)

座標を拡大縮小

skewY(角度)

Y座標のみ変形させる。X軸のみを時計回りに回転させた効果を持つ。角度をαとし変換前の座標がX,Yとすると変換後の座標X',Y'は以下の式で示せる。
X'=X

$Y'=X \tan \alpha+Y$

skewX(角度)

X座標のみ変形させる。Y軸のみを反時計回りに回転させた効果を持つ。角度をαとし変換前の座標がX,Yとすると変換後の座標X',Y'は以下の式で示せる。
$X'=X+Y \tan \alpha$
Y'=Y

変換例

<rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />

以下に上記ソースの長方形をtransform属性による座標変換例を示す。
複数の属性を使用する場合は右側から順番に変換される
図の黒色が変換前、赤色が変換後を示します。

前項のSVGソース

<svg width="610" height="210"  viewBox="-10 -20 610 210" xmlns="http://www.w3.org/2000/svg"> 
  <marker id="marker1" viewBox="-10 -5 10 10" refX="-10" refY="0" markerWidth="10" markerHeight="10" orient="auto">
    <path d="M -10 0 L 0 -5 L 0 5 Z" />
  </marker>
  <marker id="marker2" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="10" markerHeight="10" orient="auto">
    <path d="M 0 -5 L 10 0 L 0 5" fill="none" />
  </marker>
  <text x="0" y="-4" font-size="14" stroke="red">translate(20,20)</text>
  <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
  <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
  <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
  <g transform="translate(20,20)">
    <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
  </g>
  <g transform="translate(200,0)">
    <text x="0" y="-4" font-size="14" stroke="red">roate(30)</text>
    <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
    <g transform="rotate(30)">
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
      <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
      <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
    </g>
  </g>
  <g transform="translate(400,0)">
    <text x="0" y="-4" font-size="14" stroke="red">scale(1.5,0.8)</text>
    <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
    <g transform="scale(1.5,0.8)">
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
      <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
      <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
    </g>
  </g> 
  <g transform="translate(0,100)">
    <text x="0" y="-4" font-size="14" stroke="red">skewY(-30)</text>
    <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
    <g transform="skewY(-30)">
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
      <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
      <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
    </g>
  </g>
  <g transform="translate(200,100)">
    <text x="0" y="-4" font-size="14" stroke="red">skewX(-30)</text>
    <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
    <g transform="skewX(-30)">
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
      <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
      <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
    </g>
  </g>
</svg> 
<br />
<svg width="610" height="210"  viewBox="-10 -20 610 210" xmlns="http://www.w3.org/2000/svg"> 
  <text x="0" y="-4" font-size="14" stroke="red">translate(20,20) roate(30)</text>
  <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
  <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
  <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
  <g transform="translate(20,20) rotate(30)">
    <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
  </g>
  <g transform="translate(200,0)">
    <text x="0" y="-4" font-size="14" stroke="red">roate(30) translate(20,20)</text>
    <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
    <g transform="rotate(30) translate(20,20)">
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
      <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
      <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
    </g>
  </g>
  <g transform="translate(400,0)">
    <text x="0" y="-4" font-size="14" stroke="red">rotate(30) skewY(-30)</text>
    <text x="0" y="14" font-size="14" stroke="green">skewY(-30) rotate(30)</text>
    <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
    <g transform="rotate(30) skewY(-30)">
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
      <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
      <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
    </g>
    <g transform="skewY(-30) rotate(30)">
      <line x1="0" y1="0" x2="50" y2="0" stroke="green" marker-end="url(#marker2)" />
      <line x1="0" y1="0" x2="0" y2="50" stroke="green"  marker-end="url(#marker2)" />
      <rect x="10" y="20" width="30" height="20" stroke="green" fill="none" />
    </g>
  </g> 
  <g transform="translate(0,100)">
    <text x="0" y="-4" font-size="14" stroke="red">skewY(-30) rotate(30)</text>
    <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
    <g transform="skewY(-30) rotate(30)">
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
      <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
      <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
    </g>
  </g>
  <g transform="translate(200,100)">
    <text x="0" y="-4" font-size="14" stroke="red">skewX(-30) skewY(-30)</text>
    <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
    <g transform="skewX(-30) skewY(-30)">
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
      <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
      <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
    </g>
  </g>
  <g transform="translate(400,100)">
    <text x="0" y="-4" font-size="14" stroke="red" fill="red">skewY(-30) skewX(-30)</text>
    <line x1="0" y1="0" x2="50" y2="0" stroke="blue" marker-end="url(#marker2)" />
    <line x1="0" y1="0" x2="0" y2="50" stroke="blue"  marker-end="url(#marker2)" />
    <rect x="10" y="20" width="30" height="20" stroke="black" fill="none" />
    <g transform="skewY(-30) skewX(-30)">
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" marker-end="url(#marker2)" />
      <line x1="0" y1="0" x2="0" y2="50" stroke="red"  marker-end="url(#marker2)" />
      <rect x="10" y="20" width="30" height="20" stroke="red" fill="none" />
    </g>
  </g>
</svg>

ページのトップへ戻る

山本ワールド

コンピューター