SVG学習 2日目「基本描画」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

SVGを効果的に使った面白いサイトを見つけました。
 

https://d3js.org/
 


 

ヘッダの大きなバナー内がsvgで記述されています。
マウスを画像の上にかぶせると、アニメーションされて面白い効果になっています。
 

こういう蜂の巣の模様を「ハニカム模様」っていうらしいですが、たくさんのメニューを一括で見せる時にとても良さそうです。

SVGの描画について

2日目のSVG勉強は、色々な形をタグを書いて表示してみましょう。
 

svgタグ

 


 

width , height : svg全体のサイズ
viewBox : 全体サイズ内の表示するサイズ(viewBoxの方が大きい値であれば、縮小表示されます)
version : 記載しなくても大丈夫
 

上記は今回の描画する全てのシェイプを一括で表示しています。
個別の表示は下記を参考にしてください。
 

rect(箱)

 


 

属性情報
 

x , y : 座標
width , height : 縦横サイズ
stroke , stroke-width : 枠線の色と枠線の幅
fill : 塗りつぶし色
transform : rotate(回転値)、translate(移動値)

circle(円)

 


 

cx , cy : 座標
r : 半径
fill : 塗りつぶし色
stroke , stroke-width : 枠線の色と枠線の幅
transform : translate(移動値)
 

ellipse(楕円)

 


 

cx , cy : 座標
rx , ry : 縦横サイズ
fill : 塗りつぶし色
stroke , stroke-width : 枠線の色と枠線の幅
transform : rotate(回転値)、translate(移動値)
 

line(線)

 


 

x1 , y1 : 開始座標
x2 , y2 : 終点座標
stroke , stroke-width : 枠線の色と枠線の幅
 

polyline(折れ線)

 


 

points : 座標(x,y)を半角スペースで複数登録
fill : 塗りつぶし色(線を閉じていなくても自動的に塗りつぶされます)
stroke , stroke-width : 枠線の色と枠線の幅
 

ポリゴン(多角面)

 


 

points : 座標(x,y)を半角スペースで複数登録(開始点と終了点が自動的に閉じられます)
fill : 塗りつぶし色
stroke , stroke-width : 枠線の色と枠線の幅
 

次回予告

今回は、一通りのシェイプと呼ばれるオブジェクトを描いてみましたが、次回はこれをまとめたjavascriptを書いてもっと簡単にsvg設置できるようにしてみます。
 

過去のSVG記事

SVG学習 1日目「SVGの利点を再確認」
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です