May 2017
Intermediate to advanced
432 pages
5h 26m
Japanese
<svg>タグで座標系が確立されたら、描画を始める準備が整ったことになります。この章では基本的な図形、すなわち直線、矩形、多角形、円、楕円について説明します。これらを使うと、ほとんどの図形の主要な要素を作成できます。
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: ...
Read now
Unlock full access