SVGエッセンシャルズ 第2版

4章基本図形

<svg>タグで座標系が確立されたら、描画を始める準備が整ったことになります。この章では基本的な図形、すなわち直線、矩形、多角形、円、楕円について説明します。これらを使うと、ほとんどの図形の主要な要素を作成できます。

4.1　直線

SVGの<line>要素を使うと、直線を描画できます。直線を定義するには、端点のx座標とy座標を指定します。座標は単位を付けずに指定することができ、その場合はユーザー座標と見なされます。あるいは、em、inなどの単位を付けて指定することもできます（「3.1 ビューポート」を参照）。

<line x1="start-x" y1="start-y"
  x2="end-x" y2="end-y" />

ここでx1とy1は始点の座標を、x2とy2は終点の座標を表します。例4-1のSVGは、いくつかの直線を描画します。図4-1に示されているグリッドは参考のためのもので、このSVGの一部ではありません。

例4-1　基本的な直線（http://oreillymedia.github.io/svg-essentials-examples/ch04/basic-lines.html）

<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <!-- 横線 --> <line x1="40" y1="20" x2="80" y2="20" style="stroke: black;"/> <!-- 縦線 --> <line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: ...