SVGを使って図形を描画する
SVGをHTMLの一部として記述する事でJavaScriptやCSSを使った動的な表現が可能になる。
・width : 図形の幅。単位は通常ピクセル (px) を使用する。
・height : 図形の高さ。単位は通常ピクセル (px) を使用する。
・viewBox=’x,y,width,height’
x,yは描画エリアの開始座標、width,heightは描画エリアの幅と高さ。
viewBoxの値はpx単位ではなく要素の相対的なサイズを決定する。
・CASE.1 正方形
rect 要素は、現在の 利用座標系 における座標軸に平行な矩形を定義する。
属性 rx, ry に適切な値を与えて矩形の角を丸めることもできる。
・x : 矩形の左辺の X 座標。
・y : 矩形の上辺の Y 座標。
・width : 矩形の幅。
・height : 矩形の高さ。
・CASE.2 角を丸めた正方形
・rx : 矩形の角を丸めるために用いられる楕円の X 軸半径の長さ。
・ry : 矩形の角を丸めるために用いられる楕円の Y 軸半径の長さ。
・CASE.3 傾いた正方形
「rotate」を使って図形を回転させる。
回転の中心位置を指定する事で回転による位置ズレを回避する事が出来る。
・rotate(x) = ((x * 2) + width) / 2
・rotate(y) = ((y * 2) + height) / 2
circle 要素は、中心点と半径を基に円を定義する。
・cx : 円の中心の X 座標。
・cy : 円の中心の Y 座標。
・r : 円の半径。
・CASE.1 四角形
「0 0」をスタートとして反時計回りに「0 100」「100 100」「100 0」「0 0」の順で描画している。
・CASE.2 四角形ドーナツホール
外側を反時計回り、内側を時計回りで線を引くと穴を空けることが出来る。
時計回り・反時計回りの順序はどちらを外側・内側にしても可能だが、外側と内側は必ず別の回転方向にしなければならない。
・CASE.3 上下2本の円弧で円描画
上の円弧は「0 50」をスタートとして「100 50」まで描画している。
上の円弧は「100 50」をスタートとして「0 50」まで描画している。
・CASE.4 ドーナツ
外周は円弧を使って時計回りの円「1.00」を描画している。
以下はJavaScriptでSVGコードを動的に作成する場合の文字列。
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コードを動的に作成する場合の文字列。
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”;
: DATA
: BLOG
: PRAVACY POLICY
タイトルへ
サウンド設定
スクリーン設定