SVGを使って図形を描画する – browser-land

SVGを使って図形を描画する

　HTML中に直接SVGのコードを記述

<svg xmlns=’http://www.w3.org/2000/svg’ width=’100′ height=’100′ viewBox=’0 0 100 100′>
　<circle cx=’100′ cy=’100′ r=’100’/>
</svg>

SVGをHTMLの一部として記述する事でJavaScriptやCSSを使った動的な表現が可能になる。
・width : 図形の幅。単位は通常ピクセル (px) を使用する。
・height : 図形の高さ。単位は通常ピクセル (px) を使用する。
・viewBox=’x,y,width,height’
　x,yは描画エリアの開始座標、width,heightは描画エリアの幅と高さ。
　viewBoxの値はpx単位ではなく要素の相対的なサイズを決定する。

　rect

・CASE.1　正方形


<rect x=’0′ y=’0′ width=’100′ height=’100′ fill=’#f2e26d’/>

rect 要素は、現在の 利用座標系 における座標軸に平行な矩形を定義する。
属性 rx, ry に適切な値を与えて矩形の角を丸めることもできる。
・x : 矩形の左辺の X 座標。
・y : 矩形の上辺の Y 座標。
・width : 矩形の幅。
・height : 矩形の高さ。

・CASE.2　角を丸めた正方形


<rect x=’0′ y=’0′ width=’100′ height=’100′ rx=’10’ ry=’50’ fill=’#f2e26d’/>

・rx : 矩形の角を丸めるために用いられる楕円の X 軸半径の長さ。
・ry : 矩形の角を丸めるために用いられる楕円の Y 軸半径の長さ。

・CASE.3　傾いた正方形


<rect x=20 y=20 width=60 height=60 transform=rotate(45,50,50)’ fill=’#f2e26d’/>

「rotate」を使って図形を回転させる。
回転の中心位置を指定する事で回転による位置ズレを回避する事が出来る。
・rotate(x) = ((x * 2) + width) / 2
・rotate(y) = ((y * 2) + height) / 2

　circle


<circle cx=’100′ cy=’100′ r=’100′ fill=’#f2e26d’/>

circle 要素は、中心点と半径を基に円を定義する。
・cx : 円の中心の X 座標。
・cy : 円の中心の Y 座標。
・r : 円の半径。

　path

・CASE.1　四角形


<path d=’M 0 0 L 0 100 L 100 100 L 100 0 z’ fill=’#f2e26d’/>

「0 0」をスタートとして反時計回りに「0 100」「100 100」「100 0」「0 0」の順で描画している。

・CASE.2　四角形ドーナツホール


<path d=’
M 0 0 L 0 100 L 100 100 L 100 0 z
M 25 25 L 75 25 L 75 75 L 25 75 L 25 25 z’
fill=’#f2e26d’/>

外側を反時計回り、内側を時計回りで線を引くと穴を空けることが出来る。
時計回り・反時計回りの順序はどちらを外側・内側にしても可能だが、外側と内側は必ず別の回転方向にしなければならない。

・CASE.3　上下２本の円弧で円描画


<path d=’
M 0 50
A 50 50 0 1 0 100 50
A 50 50 0 1 0 0 50
z’ fill=’#f2e26d’/>

上の円弧は「0 50」をスタートとして「100 50」まで描画している。
上の円弧は「100 50」をスタートとして「0 50」まで描画している。

・CASE.4　ドーナツ


<path d=’
M 0 50
A 50 50 0 1 0 100 50
A 50 50 0 1 0 0 50
Z
M 92 49.5
C 92 75 75 92 49.5 92
C 24 92 7 75 7 49.5
C 7 24 24 7 49.5 7
C 75 7 92 24 92 49.5
Z’ fill=’#f2e26d’/>

外周は円弧を使って時計回りの円「1.00」を描画している。
以下はJavaScriptでSVGコードを動的に作成する場合の文字列。

var vOut = 1.00;
var vA = Math.floor(vW * vOut);
var vB = Math.floor(vW * (1 – vOut));
var vSvg = “”;

vSvg += “M “+(vB/2)+” “+(vA/2 + vB/2);
vSvg += “A “+(vA/2)+” “+(vA/2)+” 0 1 0 “+(vA + vB/2)+” “+(vA/2 + vB/2);
vSvg += “A “+(vA/2)+” “+(vA/2)+” 0 1 0 “+(vB/2)+” “+(vA/2 + vB/2) + ” Z”;

内周はベジェ曲線を使って反時計回りの円「0.85」を描画している。
以下はJavaScriptでSVGコードを動的に作成する場合の文字列。

var vIn = 0.85;
var vA = Math.floor(vW * vIn);
var vB = Math.floor(vW * (1 – vIn) / 2);
var vSvg = “”;

vSvg += “M “+(vA*1.0+vB)+” “+(vA*0.5+vB);
vSvg += “C “+(vA*1.0+vB)+” “+(vA*0.8+vB)+” “+(vA*0.8+vB)+” “+(vA*1.0+vB)+” “+(vA*0.5+vB)+” “+(vA*1.0+vB);
vSvg += “C “+(vA*0.2+vB)+” “+(vA*1.0+vB)+” “+(vA*0.0+vB)+” “+(vA*0.8+vB)+” “+(vA*0.0+vB)+” “+(vA*0.5+vB);
vSvg += “C “+(vA*0.0+vB)+” “+(vA*0.2+vB)+” “+(vA*0.2+vB)+” “+(vA*0.0+vB)+” “+(vA*0.5+vB)+” “+(vA*0.0+vB);
vSvg += “C “+(vA*0.8+vB)+” “+(vA*0.0+vB)+” “+(vA*1.0+vB)+” “+(vA*0.2+vB)+” “+(vA*1.0+vB)+” “+(vA*0.5+vB) + ” Z”;

　組み合わせ図形



<circle cx=’50’ cy=’50’ r=’20’ fill=’#f2e26d’/>
<rect x=47.5 y=0 width=5 height=100 fill=’#f2e26d’/>
<rect x=0 y=47.5 width=100 height=5 fill=’#f2e26d’/>
<rect x=47.5 y=0 width=5 height=100 transform=’translate(50 -20) rotate(45)’ fill=’#f2e26d’/>
<rect x=0 y=47.5 width=100 height=5 transform=’translate(50 -20) rotate(45)’ fill=’#f2e26d’/>
<path d=’
M 3 50
A 47 47 0 1 0 97 50
A 47 47 0 1 0 3 50 Z
M 92 50
C 92 75.2 75.2 92 50 92
C 24.8 92 8 75.2 8 50
C 8 24.8 24.8 8 50 8
C 75.2 8 92 24.8 92 50 Z
‘ fill=’#f2e26d’/>
Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


　

　

　

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
トップ
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームＡ
フレームＢ
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
＋5 deg.
－5 deg.
＋45 deg.
－45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード