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>

効果

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

矢印、点線、鎖線

<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"/>

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

<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

参考

http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_09.htm
https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Basic_Shapes

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

MARUYAMA Satosi