SVG:形を作るための6要素

ウオトミズ(UOTOMIZU)の中の人

形自体は自分でコーディングしなくてもIllustratorなどの作成ツールを使えばいい。ただ基礎を知らないとコードをいじれないので、どの要素が何の役目をしているかを理解しておく必要がある。ここでは形を作るSVGの要素をまとめる。

<circle>:円形

 

index.php


<svg>
<circle cx="50%" cy="50%"
r="50" fill="blue"
stroke="#fff"
stroke-width="1">
</circle>
</svg>

<circle>:円形の生成のための要素
cx属性とcy属性:位置を示すためのもの。
r属性:円形の半径。
fill属性:要素の色指定
stroke属性:線の色指定
stroke-width:線の幅指定

<ellipse>:楕円形

index.html


<ellipse cx="50%" cy="50%"
rx="50" ry="25"
fill="blue"
stroke="#fff"
stroke-width="2"/>

<ellipse>:楕円形の生成
cx属性とcy属性:位置を示すためのもの。
rx属性とry属性:楕円形の横幅と縦幅。
fill属性:要素の色指定
stroke属性:線の色指定
stroke-width:線の幅指定

<line>:棒線

index.html


<line x1="70%" y1="70%"
x2="30%" y2="30%"
stroke="red"
stroke-width="10"/>

<line>:棒線の生成
x1属性とy1属性:位置を示すためのもの。
x2属性とy2属性:位置を示すためのもの。
stroke属性:線の色指定
stroke-width:線の幅指定

<rect>:四角形


<rect x="30%" y="15%"
width="100" height="100"
fill="blue"
stroke="black"
stroke-width="1" />

 

<rect>:長方形の生成
x属性とy属性:位置を示すためのもの。
width属性とheight属性:長方形の横幅と縦幅。
fill属性:要素の色指定
stroke属性:線の色指定
stroke-width:線の幅指定

<polygon>:多角形


<polygon points="90,30 130,70 130,120 90,100 50,80 50,40"
stroke="#000"
stroke-width="1px"
fill="none"/>

 

<polygon>:多角形を生成

point属性:点の位置を指定

fill属性:要素の色指定
stroke属性:線の色指定
stroke-width:線の幅指定

<polyline>:ポリライン

 


<polyline points="30,100 40,60 170,80 190,20"
fill="none"
stroke="black"
stroke-width="3"/>

<polyline>:多角形を生成

point属性:点の位置を指定

fill属性:要素の色指定
stroke属性:線の色指定
stroke-width:線の幅指定

最後に

CodePenをのせておく。

 

 

こちらの記事もどうぞ

SVGのグラデーション系の要素についてはこちら。

SVGの<animateMotion>要素についてはこちら。

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO