【SVG】基本図形とスタイル
SVG
2021/08/22
図形
直線
<line x1="start-x" y1="start-y" x2="end-x" y2="end-y" />始点の座標(x1, y1)と終点の座標(x2, y2)を指定します。
<svg width="100px" height="100px">
<line x1="10" y1="10" x2="70" y2="90" style="stroke: blue" />
<line x1="60" y1="10" x2="30" y2="80" style="stroke: red" />
</svg>矩形
<rect x="left" y="top" width="width" height="height" rx="round-x" ry="round-y" />左上の座標(x, y)と幅（width)、高さ（height）を指定します。
座標は省略した場合、(0, 0) となります。
rx、ryは、角を丸くする場合の x 半径と y 半径になります。
<svg width="100px" height="100px">
<rect width="30" height="40" style="fill: blue" />
<rect x="30" y="40" width="70" height="50" style="fill: red" />
</svg>円
<circle cx="center-x" cy="center-y" r="radius" />中心の座標(cx, cy)と半径（r）を指定します。
<svg width="100px" height="100px">
<circle cx="25" cy="25" r="20" style="fill: blue" />
<circle cx="70" cy="60" r="30" style="fill: red" />
</svg>楕円
<ellipse cx="center-x" cy="center-y" rx="radius-x" ry="radius-y" />中心の座標(cx, cy)と、x 軸、y 軸の半径(rx, ry)を指定します。
<svg width="100px" height="100px">
<ellipse cx="25" cy="25" rx="10" ry="20" style="fill: blue" />
<ellipse cx="60" cy="70" rx="40" ry="30" style="fill: red" />
</svg>多角形
<polygon points="points" />座標をいくつか指定すると、その順に線が結ばれ多角形が作成されます。
<svg width="200px" height="200px">
<polygon points="50,10 10,30 10,70 50,90 90,70 90,30"
style="fill: blue; stroke: black" />
<polygon points="140,100 105,190 190,130 90,130 175,190"
style="fill: red; stroke: black"/>
</svg>折線
<polyline points="points" /><polygon>と基本的な考えは同じで、始点と終点が結ばれないところが異なります。
<svg width="200px" height="200px" style="background: #ddd">
<polyline points="50,10 10,30 10,70 50,90 90,70 90,30"
style="fill: none; stroke: black"/>
<polyline points="140,100 105,190 190,130 90,130 175,190"
style="fill: none; stroke: black"/>
</svg>スタイル
stroke
線の色を設定します。
<svg width="100px" height="100px">
<line x1="10" y1="10" x2="70" y2="90"
style="stroke: blue" />
<line x1="60" y1="10" x2="30" y2="80"
style="stroke: red" />
</svg>stroke-width
線の太さを設定します。
<svg width="100px" height="100px">
<line x1="10" y1="10" x2="70" y2="90"
style="stroke: blue; stroke-width: 5" />
<line x1="60" y1="10" x2="30" y2="80"
style="stroke: red; stroke-width: 10" />
</svg>stroke-opacity
線の透過度を設定します。
<svg width="100px" height="100px">
<line x1="10" y1="10" x2="70" y2="90"
style="stroke: blue; stroke-width: 5; stroke-opacity: 0.6" />
<line x1="60" y1="10" x2="30" y2="80"
style="stroke: red; stroke-width: 10; stroke-opacity: 0.3" />
</svg>stroke-dasharray
点線や波線を形成するのに、そのパターンを設定します。
<svg width="200px" height="100px">
<line x1="5" y1="10" x2="195" y2="10"
style="stroke: black" />
<line x1="5" y1="30" x2="195" y2="30"
style="stroke: black; stroke-dasharray: 2" />
<line x1="5" y1="50" x2="195" y2="50"
style="stroke: black; stroke-dasharray: 10 5" />
<line x1="5" y1="70" x2="195" y2="70"
style="stroke: black; stroke-dasharray: 10 5 20 10"/>
<line x1="5" y1="90" x2="195" y2="90"
style="stroke: black; stroke-dasharray: 5 10 20 10 5 10" />
</svg>stroke-dashoffset
stroke-dasharrayの開始位置を設定します。
<svg width="200px" height="100px">
<line x1="5" y1="15" x2="195" y2="15"
style="stroke: black; stroke-dasharray: 20 5" />
<line x1="5" y1="35" x2="195" y2="35"
style="stroke: black; stroke-dasharray: 20 5; stroke-dashoffset: 10" />
</svg>stroke-linecap
線の端の形を指定します。
<svg width="200px" height="100px">
<line x1="10" y1="15" x2="190" y2="15"
style="stroke: black; stroke-width: 15; stroke-linecap: butt" />
<line x1="10" y1="50" x2="190" y2="50"
style="stroke: black; stroke-width: 15; stroke-linecap: round" />
<line x1="10" y1="85" x2="190" y2="85"
style="stroke: black; stroke-width: 15; stroke-linecap: square" />
</svg>stroke-linejoin
折線などの折れた部分の形を指定します。
<svg width="400px" height="45px">
<polyline points="10,10 30,30 50,10"
style="fill: none; stroke: black; stroke-width: 15; stroke-linejoin: miter"/>
<polyline points="60,10 80,30 100,10"
style="fill: none; stroke: black; stroke-width: 15; stroke-linejoin: round"/>
<polyline points="110,10 130,30 150,10"
style="fill: none; stroke: black; stroke-width: 15; stroke-linejoin: bevel"/>
<polyline points="160,10 180,30 200,10"
style="fill: none; stroke: black; stroke-width: 15; stroke-linejoin: miter-clip"/>
<polyline points="210,10 230,30 250,10"
style="fill: none; stroke: black; stroke-width: 15; stroke-linejoin: arcs"/>
</svg>fill
図形を塗りつぶす色を指定します。
塗りつぶしをしない場合はnoneを指定します。
<svg width="100px" height="100px">
<rect x="5" y="5" width="50" height="50"
style="fill: blue" />
<rect x="45" y="45" width="50" height="50"
style="fill: red" />
</svg>fill-opacity
塗りつぶしの投下度を設定します。
<svg width="100px" height="100px">
<rect x="5" y="5" width="50" height="50"
style="fill: blue; fill-opacity: 0.3" />
<rect x="45" y="45" width="50" height="50"
style="fill: red; fill-opacity: 0.6" />
</svg>fill-rule
塗りつぶしのルールを設定します。 ルール適用の詳細については割愛します。
<svg width="300px" height="100px">
<polygon points="50,0 15,100 100,35 0,35 85,100"
style="stroke: black; fill: blue; fill-rule: nonzero" />
<polygon points="150,0 115,100 200,35 100,35 185,100"
style="stroke: black; fill: red; fill-rule: evenodd" />
</svg>プレゼンテーション属性
上記のスタイルで説明したプロパティは、以下のように属性で指定することができます。
<line x1="10" y1="15" x2="190" y2="15"
stroke="black" stroke-width="15" stroke-linecap="round" />
<circle cx="50" cy="50" r="30" fill="red" fill-opacity="0.5" />