SVG の図形要素

作成日 : 2017-10-21
最終更新日 :

基本的な図形要素

以下すべては
<svg width="200" height="200" viewBox="0 0 200 200">
ではじまり
</svg>
で終わるものとする。

線分

<line x1="60" y1="10" x2="10" y2="190" stroke="black" stroke-width="1"/>
<line x1="140" y1="10" x2="190" y2="190" stroke="black" stroke-width="1"/>
<line x1="70" y1="20" x2="130" y2="20" stroke="black" stroke-width="1"/>
<line x1="70" y1="60" x2="130" y2= "60" stroke="black" stroke-width="1"/>
<line x1="70" y1="100" x2="130" y2="100" stroke="black" stroke-width="1"/>
<line x1="70" y1="140" x2="130" y2="140" stroke="black" stroke-width="1"/>
<line x1="70" y1="180" x2="130" y2="180" stroke="black" stroke-width="1"/>

長方形、角丸長方形

<rect x="10" y="10" width="180" height="180" stroke="black" stroke-width="1" fill="none"/>
<rect x="50" y="50" rx="20" ry="40" width="120" height="100" stroke="indigo" stroke-width="5" fill="none"/>

円、楕円

<circle cx="70" cy="60" r="50" stroke="black" stroke-width="1" fill="yellow"/>
<ellipse cx="120" cy="140" rx="50" ry="30" stroke="brown" stroke-width="2" fill="crimson"/>

折れ線、多角形

<polyline points="100,50 50,150 150,80, 50,80 150,150" stroke="orange" stroke-width="4" fill="lightblue"/>
<polygon points="160,160 190,190 150 170" stroke="green" stroke-width="3" fill="cyan"/>

文字

本日は晴天なり

<text x="100" y="100" fill="blue" font-size="12"> 本日は晴天なり </text>

効果

線分に対する矢印や点線・破線、２次元図形に対するグラデーションなどを述べる

矢印、点線、鎖線

矢印は、まず矢印の先の形を polygon などで定義しておき、それを marker-start などで引用して矢印とする。

点線・破線は stroke-dasharray に指定する数字列でパターンを決める。

<marker id="m_ar" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="10" markerHeight="15" orient="auto-start-reverse">
<polygon points="0,0 0,10 10,5" id="ms" />
</marker>
<line x1="60" y1="10" x2="10" y2="190" stroke="black" stroke-width="1" marker-start="url(#m_ar)/>
<line x1="140" y1="10" x2="190" y2="190" stroke="black" stroke-width="1" marker-end="url(#m_ar) />
<line x1="70" y1="20" x2="130" y2="20" stroke="black" stroke-width="1" marker-start="url(#m_ar) marker-end="url(#m_ar)/>
<line x1="70" y1="100" x2="130" y2="100" stroke="black" stroke-width="1" stroke-dasharray="2" />
<line x1="70" y1="140" x2="130" y2="140" stroke="black" stroke-width="1" stroke-dasharray="10 2 2 2"/>

動径方向のグラデーション

<defs>
<radialGradient id="grad" fx="30%" fy="20%">
<stop offset="0%" stop-color="#fff" />
<stop offset="50%" stop-color="#0bf" />
<stop offset="90%" stop-color="#09c" />
<stop offset="100%" stop-color="#08a" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="60" fill="url(#grad)" />

path 要素

直線

位置の指定法任意終点水平方向終点垂直方向終点
絶対位置LHV
相対位置lhv

defs による使いまわし

下記ではバネを定義し、３か所で使っている。

SVGの練習

SVG は次のページで使っている。

参考

まりんきょ学問所 ＞ コンピュータの部屋 ＞ マーク付け言語手習い ＞ SVG の図形要素

MARUYAMA Satosi