POPSブログ

SVG.js 図形とパスの描画

377

  Category:  javascript2016/02/03 pops 

SVG.js 図形とパスの描画について調べてみます。一部当方独自の方法をも取りますが、一応正常に可動します。何も知らない者が「SVG」を触るのですから大変無謀なことです。

 

SVG.js 図形とパスの描画についてのテスト


zudaze

 

ご注意、Chrome.Firefox.IE11(一部機能しません)などSVGに対応したブラウザでご覧ください。Chromeを推奨します。

 

DEMO 図形とパスの描画、その他の「デモ」

● デモページは [ jqury-1.9 ] で動作しています。


Chromeでの閲覧を推奨します


DEMO、このページに収容できない、図形とパスの描画に関連する「デモ」です。

DEMO-037




 

SVG.js 使用の基本的な説明


下記のJSおよびプラグインが必要になります。

SVG.js 配布サイト svgjs.com Downloadsよりsvg.js 1.0.1、svg.min.js 1.0.1が取得できます。

filterプラグイン svg.filter.jsフィルター処理用のJSです。

draggableプラグイン svg.draggable.jsドラッグ用のJSです。

ドキュメント 英字ドキュメント英字のマニュアル説明です。


filterプラグインは2年前のもので、DropShadow処理でエラーがでるので、DropShadowのみカスタムのJSを作り別の方法で対処します。Blur処理などで一応必要になります。
svg.jsは意外と頻繁に更新されていますが、古いバージョンの取得はできませんので、時間経過と共に記事の内容と異なる事が発生するかも知れません。マニュアル記載の例文が多いので結構助かります。(英文は判りませんが適当に解釈しまして...)
このページでは、version 2.2.5、BUILT:Mon Jan 11現在のsvg.jsを使用しています。

 

SAMPLEとデモのJSについて

このページとデモページにサンプルと共にJSを記載しています。余り説明などしていませんので、感覚的に違いなど理解ください。
Chrome.Firefox.IE11で確認しながら進めますが、その他のブラウザは未確認です。


図形とパスの描画

標準的な、rect roundrect circle ellipse、については「前ページ」で述べたので参照ください。
ここでは、その他の図形、ライン、パスについて見てみる。



rectの例
var rect=draw.rect(100,100).attr({'fill':'#000'})

標準的な図形の描画

以下、標準的な図形をSVG.jsのメソッドにより描画している。おさらいである。当然これらもパスで描画できるが面倒である。


SAMPLE、sample-7a, sample-7b, sample-7c

 

サンプルJS


	//対象エレメントID
	var draw=SVG('sample-7a').size(160,160)

	var rect=draw.rect(100,100).attr({'fill':'#FFD700'}).center(80,80)
	.attr({'filter':'url(#dropShadow)'})

	var text=draw.text('1 rect dropShadow').font({leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-7b').size(160,160)

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(100/160)
	//画像塗り
	var rect=draw.rect(100,100).radius(10).attr({'fill':image,'stroke':'#FFF','stroke-width':2}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

	var text=draw.text('2 画像塗りdropShadow2').font({leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-7c').size(160,160)

	var rect1=draw.rect(100,100).attr({'fill':'#FFD700','stroke':'#FFF','stroke-width':2}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})
	var rect2=draw.rect(80,80).attr({'fill':'#DAA520'}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})
	var rect3=draw.circle(60,60).attr({'fill':'#B8860B'}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})
	var group=draw.group()
	group.add(rect1).add(rect2).add(rect3)
	//回転
	group.rotate(30)

	var text=draw.text('3 gruop.add()のDropShadow2').font({size:10,leading:0.8})


Line、Polyline、、Polygon の描画

ライン、多角形などはSVG.jsのメソッド Line、Polyline、、Polygonで簡単に描けるが、
Polylineは「折れ線グラフ」用途にむいている。下記例 SAMPLE 2番参照。
fill形式の図形またはstrokeで閉じる図形ならば、Polygonを利用した方が良い。下記例 SAMPLE 4番参照。

polyline 始点終点の形状に注意、おそらく線が始点に勝手に描画されないように意図したものと思う。
修正の方法もあるが...余り意味無し。



ライン両端の形状butt
stroke-linecap / butt round square

ライン交差の頂点形状
stroke-linejoin / miter round bevel

点線や破線のパターンを指定
stroke-dasharray 4 '10,5' '10,2,2,2' など

SAMPLE、sample-8a, sample-8b, sample-8c

 

line()の場合の線の太さ 2 は色は正確。太さ 1、0.5 では色が薄くなる。これは仕様なのかナ.... 気分の問題かナ...
(但しパス描画の線は正確である事が多い、ブラウザによっては多少見え方は違いますが)

 

サンプルJS


	//対象エレメントID
	var draw=SVG('sample-8a').size(160,160)

	//1
	var line=draw.line(10,30,150,30).attr({'stroke':'#000','stroke-width':2})
	//2
	var line2=draw.line(10,50,150,50).attr({'stroke':'#000','stroke-width':5})
	//3
	var line3=draw.line(10,70,150,70).attr({'stroke':'#000','stroke-width':5,'stroke-linecap':'round'})
	//4
	var line4=draw.line(10,90,150,90).attr({'stroke':'#000','stroke-width':1,'stroke-dasharray':4})
	//5
	var line5=draw.line(10,110,150,110).attr({'stroke':'#000','stroke-width':2,'stroke-dasharray':'10,2,2,2'})
	//6
	var line6=draw.line(10,130,150,130).attr({'stroke':'#000','stroke-width':1})
	//7
	var line7=draw.line(10,150,150,150).attr({'stroke':'#000','stroke-width':0.5})

	var text=draw.text('1 line').font({leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-8b').size(160,160)

	//stroke/stroke-linejoin:miterの機能する部分に注意
	var polyline1=draw.polyline('30,30 50,50 100,30 130,80').attr({'fill':'none','stroke':'#000','stroke-width':8})
	var polyline2=draw.polyline('30,80 130,110 30,140 30,80').attr({'fill':'none','stroke':'#000','stroke-width':8,'stroke-linejoin':'miter'})

	var text=draw.text('2 polyline 始点終点の形状に注意').font({size:10,leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-8c').size(160,160)

	var polygon1=draw.polygon('30,30 50,50 100,30 130,80').attr({'fill':'#ccc','stroke':'#000','stroke-width':1})
	var polygon2=draw.polygon('30,80 130,110 30,140 30,80').attr({'fill':'#ccc','stroke':'#000','stroke-width':1,'stroke-linejoin':'miter'})

	var text=draw.text('3 polygon FILL始点終点OK').font({size:10,leading:0.8})


Polygonで簡単に描けるが中央設定などが狂うので、6番はlineToNgon()のオリジナル関数でパスを作り描画している。


SAMPLE、sample-8d, sample-8e, sample-8f

 

サンプルJS


	//対象エレメントID
	var draw=SVG('sample-8d').size(160,160)

	var polygon3=draw.polygon('30,20 130,50 30,80 30,20').attr({'fill':'#f00','stroke':'#000','stroke-width':6,'stroke-linejoin':'round'})
	var polygon4=draw.polygon('30,90 130,120 30,150 30,90').attr({'fill':'#ccc','stroke':'#000','stroke-width':6,'stroke-linejoin':'miter'})

	var text=draw.text('4 polygon FILL始点終点OK').font({size:10,leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-8e').size(160,160)

	var polygon5=draw.polygon('30,30 117,80 30,130 30,30').attr({'fill':'#ccc','stroke':'#000','stroke-width':6,'stroke-linejoin':'miter'})
	.attr({'filter':'url(#dropShadow2)'})
	var polygon6=draw.polygon('30,30 117,80 30,130 30,30').attr({'fill':'none','stroke':'#F00','stroke-width':6,'stroke-dasharray':6})

	var text=draw.text('5 polygon dropShadow2').font({leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-8f').size(160,160)

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(100/160)
	//Ngon
	var spikes,point_x,point_y,radius_v,angle_v
	spikes=3
	radius_v=60
	point_x=80
	point_y=80
	angle_v=-90

	//lineToNgon/Path
	var str=lineToNgon(spikes,radius_v,point_x,point_y,angle_v)
	var triangle=draw.path(str).attr({'fill':image,'stroke':'#000','stroke-width':6,'stroke-linejoin':'miter'})
	.attr({'filter':'url(#dropShadow2)'})

	var text=draw.text('6 ngon triangle').font({leading:0.8})


Polyline Polygon とplot()メソッドの利用

1番は、Polygonを利用した場合で有るが、strokeの始点終点が綺麗に処理されている。
2.3番は、plot()メソッドを利用して、各ポイントを配列化して動かしてみた。
(Line Polyline Polygon Path のplot()設定はplot()で変更出来ます。下記アニメでは自動で連続的にUpdateされる)


plot()
path.plot('M100,200L300,400')

例を掲示するが、面倒ですから余り利用はないでショウ。そう思います。

1番、plotで変更(ボタン押す、1回限り)。2.3番はアニメで戻ります。


SAMPLE、sample-8g, sample-8h, sample-8i

 

サンプルJS


	//対象エレメントID
	var draw=SVG('sample-8g').size(160,160)

	var mv_line=draw.polyline([[30,30],[50,50],[70,30],[90,80],[110,60],[130,120]])
	.attr({'fill':'none','stroke':'#000','stroke-width':8,'stroke-opacity':0.5})

	//ボタン
	var anime_btn=draw.circle(10).attr({'fill':'#0000FF','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	anime_btn.click(function(){
		mv_line.plot([[30,80],[50,30],[70,90],[90,50],[110,110],[130,40]])
	})

	var text=draw.text('1 折れ線グラフplot、 Click').font({leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-8h').size(160,160)

	var line=draw.polyline('30,30 50,50 70,30 90,80 110,60 130,120').attr({'fill':'none','stroke':'#F00','stroke-width':1})
	//var mv_polyline=draw.polyline('30,30 50,50 70,30 90,80 110,60 130,120').attr({'fill':'none','stroke':'#000','stroke-width':8,'stroke-opacity':0.5})
	var mv_polyline=draw.polyline([[30,30],[50,50],[70,30],[90,80],[110,60],[130,120]])
	.attr({'fill':'none','stroke':'#000','stroke-width':8,'stroke-opacity':0.5})

	//ボタン
	var anime_btn2=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	anime_btn2.click(function(){
		mv_polyline.animate(2000).plot([[30,80],[50,30],[70,90],[90,50],[110,110],[130,40]]).after(function(){
			this.animate(2000).plot([[30,30],[50,50],[70,30],[90,80],[110,60],[130,120]])
		})
	})

	var text=draw.text('2 折れ線グラフアニメ Click').font({leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-8i').size(160,160)

	var rect=draw.rect(100,100).attr({'fill':'none','stroke':'#F00','stroke-width':1}).center(80,80)

	var mv_polygon=draw.polygon([[30,30],[80,30],[130,30],[130,130],[80,130],[30,130]])
	.attr({'fill':'#FFD700','stroke':'#000','stroke-width':4,'stroke-opacity':0.5})

	//ボタン
	var anime_btn3=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	anime_btn3.click(function(){
		mv_polygon.animate(2000).plot([[30,50],[80,30],[130,50],[130,110],[80,130],[30,110]]).after(function(){
			this.animate(2000).plot([[30,30],[80,30],[130,30],[130,130],[80,130],[30,130]])
		})
	})

	var text=draw.text('3 形状変化アニメ Click').font({leading:0.8})


パスの描画

上記のメソッド以外で図形などを描画するには、パスを利用することになる。
「svg」パスの「d」と同じ表記で有るが、v h 等「svg」独自の仕様も有り、通常のパスと相違がある為に理解し難い。


pathには以下のようなコマンドが有り、組み合わせて複雑な図形を描きます。


M,m 始点に移動
L,l 直線を引く
H,h 水平線を引く
V,v 垂直線を引く
Q,q 二次ベジェ曲線
C,c 三次ベジェ曲線
A,a 円弧
Z,z 線を閉じる

大文字は絶対座標、小文字は相対座標を表します

1番目、ラインの組み合わせは簡単であるが、その他は慣れが必要である..... (ほとんど判らんですナ)

他の「svg」パスをパクッテ、少し修正しても良い。数をこなせば自力で書ける様になるカモ.....


.path('M 20 120 L 50 25 L 100 100 L 120 50 L 140 80')
.path('M10 80 Q 45 10, 80 80 T 150 80')
.path('M 20,80 A 60,60 0 1,1 140,80 A 60,60 0 1,1 20,80 z')

3番、path円弧描画であるが、「svg」では始点と終点が同じでは「円弧描画」出来ないため2つの「円弧」の組み合わせと成る。


SAMPLE、sample-8g, sample-8h, sample-8i

 

サンプルJS


	//Path
	//対象エレメントID
	var draw=SVG('sample-8j').size(160,160)

	//全てスペースで区切る
	var str='M'+' '+20+' '+120+' '+'L'+' '+50+' '+25+' '+'L'+' '+100+' '+100+' '+'L'+' '+120+' '+50+' '+'L'+' '+140+' '+80
	var str='M 20 120 L 50 25 L 100 100 L 120 50 L 140 80'

	var pathline=draw.path(str).attr({'fill':'none','stroke':'#F00','stroke-width':1})

	var text=draw.text('1 path').font({leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-8k').size(160,160)

	var pathline=draw.path('M10 80 Q 45 10, 80 80 T 150 80').attr({'fill':'none','stroke':'#F00','stroke-width':1})

	var text=draw.text('2 path').font({leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-8l').size(160,160)

	var pathline=draw.path('M 20,80 A 60,60 0 1,1 140,80 A 60,60 0 1,1 20,80 z').attr({'fill':'#FFD700','stroke':'#000','stroke-width':1})

	var text=draw.text('3 path').font({leading:0.8})


Stroke円弧と陰影

主にFillのない太いStrokeのみで描いた円弧の場合ですが、dropShadowがIE11でNGなために、Blurで対応します。
本来、SVG.jsのdropShadowには、Filter範囲の拡張ができますが、エラーで利用できずカスタムdropShadowで処理しているので、範囲の拡張が出来ません。

dropShadow等の処理を行わない用途なら何ら問題は無い。また外形形状をパスで構成すれば、面倒ではあるが問題は起きない(図形表示11 特殊な円弧Fill形式として、デモページに作ってあります)。

zuzuzu

 

SAMPLE、sample-8m, sample-8n, sample-8o

 

サンプルJS

説明用です


	//IE-NG-TEST
	//対象エレメントID
	var draw=SVG('sample-8m').size(160,160)

	var arc=draw.path('M 100 0 A 100 100 0 0 1 50 86.6').attr({'fill':'none','stroke':'#FF8C00','stroke-width':20}).center(80,80)
	.attr({'filter':'url(#dropShadow)'})

	var text=draw.text('1 dropShadow IE NG').font({leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-8n').size(160,160)

	var shadow=draw.path('M 100 0 A 100 100 0 0 1 50 86.6').attr({'fill':'none','stroke':'#000','stroke-width':20}).center(82,82)
	.filter(function(add) {
		add.gaussianBlur(3)
		//this.size('200%','200%').move('-50%','-50%')
	})
	var arc=draw.path('M 100 0 A 100 100 0 0 1 50 86.6').attr({'fill':'none','stroke':'#FF0000','stroke-width':20}).center(80,80)
	
	var text=draw.text('2 Blur ALL NG').font({leading:0.8})

	//------------

	//対象エレメントID
	var draw=SVG('sample-8o').size(160,160)

	var shadow=draw.path('M 100 0 A 100 100 0 0 1 50 86.6').attr({'fill':'none','stroke':'#000','stroke-width':20}).center(82,82)
	.filter(function(add) {
		add.gaussianBlur(3)
		this.size('200%','200%').move('-50%','-50%')
	})
	var arc=draw.path('M 100 0 A 100 100 0 0 1 50 86.6').attr({'fill':'none','stroke':'#00BFFF','stroke-width':20}).center(80,80)
	
	var text=draw.text('2 Blur ALL OK').font({leading:0.8})


対象インスタンスの直下に、黒いshadowインスタンスを作りボカスだけの処理ですが、手間が掛かるだけです。
ずらし、ぼかし幅は調整できます。Filter範囲の拡張を忘れずに。


//shadow
var shadow=draw.path().....
//Blur filterと範囲拡張
.filter(function(add) {
	add.gaussianBlur(3)
	this.size('200%','200%').move('-50%','-50%')
})

パスで各種図形を描画する

標準で描けない図形はパスを使って描きますが、これらは全て自作しなければなりません。次は多角形描画の一例です。
その他は「デモページ」に幾つか有りますので参照ください。


zuzu

 

スター、多角形とstrokeのスター

1.2番 スター多角形はプラグインsvg.shapes.jsを利用しないライン描画の形式です。(自作関数使用)
プラグインを利用するとこの「1.2番」2つのみ簡単に出来る。例は別途デモページ「プラグインsvg.shapes.jsの図形描画」を参照ください。


標準では描けないので、つまりこれらは全て「パス描画」で自作しなければならない。
図形によっては中心がずれるので、中心点を指定して描く様にしました。画像塗りなどの場合に簡単になる仕様です。


自作関数はパスのストリングを生成するだけですから、.path()で「svg」表示させます。自作ですから自分で利用し易くすれば良い訳です。円弧扇形をのぞいては比較的楽と思います。


星形の場合

//パスのストリングを得る
var str=lineToStar(条件)
//pathの描画
var star=draw.path(str).attr({'fill':'#FFD700','stroke':'#000','stroke-width':1})

----------------------------------------------------------

//自作描画関数
function lineToStar(spikes..){

	略す

	return str

}

SAMPLE、sample-9a, sample-9b, sample-9c

 

サンプルJS


	//Star
	//対象エレメントID
	var draw=SVG('sample-9a').size(160,160)

	var spikes,point_x,point_y,outer_v,inner_v,angle_v
	spikes=5
	outer_v=60
	inner_v=23
	point_x=80
	point_y=80
	angle_v=-90

	//lineToStar/Path
	var str=lineToStar(spikes,outer_v,inner_v,point_x,point_y,angle_v)
	var star=draw.path(str).attr({'fill':'#FFD700','stroke':'#000','stroke-width':1})

	var text=draw.text('1 star').font({leading:0.8})

	//------------

	//Ngon
	//対象エレメントID
	var draw=SVG('sample-9b').size(160,160)

	var spikes,point_x,point_y,radius_v,angle_v
	spikes=5
	radius_v=60
	point_x=80
	point_y=80
	angle_v=-90

	//lineToNgon/Path
	var str=lineToNgon(spikes,radius_v,point_x,point_y,angle_v)
	var ngon=draw.path(str).attr({'fill':'#FFD700','stroke':'#000','stroke-width':1})

	var text=draw.text('2 ngon').font({leading:0.8})

	//------------

	//strokeスター
	//対象エレメントID
	var draw=SVG('sample-9c').size(160,160)

	//条件
	var poly_spikes=5//分割/5以上のこと
	var poly_radius=50//半径
	var start_no=[0,1,3]//開始POINT角度番号
	var poly_type=1//1 0/0は中心に戻る
	var point_x=80//中心位置X
	var point_y=80//中心位置Y
	//パスデータ
	var str=poly_star(poly_spikes,poly_radius,start_no[0],start_no[1],start_no[2],poly_type,point_x,point_y)
	//blur-line
	var blurline=draw.path(str).attr({'fill':'none','stroke':'#00BFFF','stroke-width':2}).center(80,80)
	blurline.filter(function(add) {
  		add.gaussianBlur(3)
	})
	//stroke
	var starline=draw.path(str).attr({'fill':'none','stroke':'#FFF','stroke-width':3}).center(80,80)

	var text=draw.text('3 strokeスター').font({leading:0.8})


SAMPLE、sample-9d, sample-9e, sample-9f

 

サンプルJS


	//Star画像塗り
	//対象エレメントID
	var draw=SVG('sample-9d').size(160,160)

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(120/160)

	var spikes,point_x,point_y,outer_v,inner_v,angle_v
	spikes=7
	outer_v=60
	inner_v=40
	point_x=80
	point_y=80
	angle_v=-90

	//lineToStar/Path
	var str=lineToStar(spikes,outer_v,inner_v,point_x,point_y,angle_v)
	var star=draw.path(str).attr({'fill':image,'stroke':'#FFF','stroke-width':2})
	.attr({'filter':'url(#dropShadow2)'})

	var text=draw.text('1 star').font({leading:0.8})

	//------------

	//Ngon画像塗り
	//対象エレメントID
	var draw=SVG('sample-9e').size(160,160)

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(120/160)

	var spikes,point_x,point_y,radius_v,angle_v
	spikes=6
	radius_v=60
	point_x=80
	point_y=80
	angle_v=-90

	//lineToNgon/Path
	var str=lineToNgon(spikes,radius_v,point_x,point_y,angle_v)
	var ngon=draw.path(str).attr({'fill':image,'stroke':'#FFF','stroke-width':2})
	.attr({'filter':'url(#dropShadow2)'})

	var text=draw.text('2 ngon').font({leading:0.8})

	//------------

	//strokeスター
	//対象エレメントID
	var draw=SVG('sample-9f').size(160,160)

	//image 200x200
	var image=draw.image('/main/images/grad_200.jpg').size(200,200)

	//条件
	var poly_spikes=7//分割/5以上のこと
	var poly_radius=70//半径
	var start_no=[0,2,2]//開始POINT角度番号
	var poly_type=1//1 0/0は中心に戻る
	var point_x=80//中心位置X
	var point_y=80//中心位置Y
	//パスデータ
	var str=poly_star(poly_spikes,poly_radius,start_no[0],start_no[1],start_no[2],poly_type,point_x,point_y)
	//stroke
	var starline=draw.path(str).attr({'fill':'none','stroke':image,'stroke-width':3}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

	var text=draw.text('3 strokeスター').font({leading:0.8})


自作、図形描画関数

パスで色々な図形を描くに、以下の様に自作関数で処理している。

ラインの連続をストリングにしているだけ。間に全て「半角スペース」を挟んでいます。1箇所でも間違いがあれば .path(str) で「エラー停止」ですから注意ください。(jQueryでHTMLに出力して確認すると間違いが判る)


何処かに出力して確認
$('#dokoka').text(str)

lineToStar()、lineToNgon()、はプラグインsvg.shapes.jsは不要です。
poly_star()は3本のラインをあっちこっちに引いているだけ(何が出来るか判らない)。


//lineToStar/Path
function lineToStar(spikes,outer_v,inner_v,point_x,point_y,angle_v){

	var a=360/spikes
	var hf=a/2
	var str='',string='',keep_x,keep_y

	//rect配置描画/補正
	for (i=0; i < spikes; i++){

		var x=point_x+outer_v*Math.cos((i*a+angle_v)*Math.PI/180)
		var y=point_y+outer_v*Math.sin((i*a+angle_v)*Math.PI/180)
		var x1=point_x+inner_v*Math.cos((i*a+hf+angle_v)*Math.PI/180)
		var y1=point_y+inner_v*Math.sin((i*a+hf+angle_v)*Math.PI/180)
		if(i==0){keep_x=x,keep_y=y}//保存

		//line
		if(i==0){
			string='M' + ' ' + x + ' ' + y + ' ' + 'L' + ' ' + x1 + ' ' + y1 + ' '
		}else{
			string='L' + ' ' + x + ' ' + y + ' ' + 'L' + ' ' + x1 + ' ' + y1 + ' '
		}

		str=str+string
		if(i==spikes-1){str=str + 'L' + ' ' + keep_x + ' ' + keep_y}
	}
	str=str + ' ' + 'Z'
	return str

}

//Ngon
function lineToNgon(spikes,radius_v,point_x,point_y,angle_v){

	var a=360/spikes
	var str='',string='',keep_x,keep_y

	//rect配置描画/補正
	for (i=0; i < spikes; i++){

		var x=point_x+radius_v*Math.cos((i*a+angle_v)*Math.PI/180)
		var y=point_y+radius_v*Math.sin((i*a+angle_v)*Math.PI/180)
		var x1=point_x+radius_v*Math.cos(((i+1)*a+angle_v)*Math.PI/180)
		var y1=point_y+radius_v*Math.sin(((i+1)*a+angle_v)*Math.PI/180)

		//line
		if(i==0){
			string='M' + ' ' + x + ' ' + y + ' ' + 'L' + ' ' + x1 + ' ' + y1 + ' '
		}else{
			string='L' + ' ' + x + ' ' + y + ' ' + 'L' + ' ' + x1 + ' ' + y1 + ' '
		}

		str=str+string
	}
	str=str + ' ' + 'Z'
	return str

}

//strokeスター
function poly_star(spikes,radius,s_no1,s_no2,s_no3,type,point_x,point_y){

	var str='',x1,y1,x2,y2,x3,y3,angle=360/spikes

	for (i=0; i < spikes; i++) {

		var string=''
		x1=point_x+radius*Math.cos((i+s_no1)*angle*Math.PI/180)
		y1=point_y+radius*Math.sin((i+s_no1)*angle*Math.PI/180)
		x2=point_x+radius*Math.cos((i+s_no2)*angle*Math.PI/180)
		y2=point_y+radius*Math.sin((i+s_no2)*angle*Math.PI/180)
		x3=point_x+radius*Math.cos((i+s_no3)*angle*Math.PI/180)
		y3=point_y+radius*Math.sin((i+s_no3)*angle*Math.PI/180)

		//1外周移動
		if(type){string=' M' + ' ' + x1 + ' ' + y1 + ' ' + 'L' + ' ' + x1 + ' ' + y1 + ' ' + x3 + ' ' + y3 + ' ' + 'L' +  ' ' + x3 + ' ' + y3 + ' ' + x2 + ' ' + y2}
		//中心に戻る
		if(!type){string=' M' + ' ' + x1 + ' ' + y1 + ' ' + 'L' + ' ' + x1 + ' ' + y1 + ' ' + x3 + ' ' + y3 + ' ' + 'L' +  ' ' + x3 + ' ' + y3 + ' ' + x2 + ' ' + y2 + ' ' + 'L' + ' ' + point_x + ' ' + point_y}

		str=str+string
	}
	//Z設定しないこと
	return str
}

以上が基本的な「svg図形描画」の説明である。大体この程度の知識で「すごく大変である」がほぼ描画できます。使用する事の無い機能などもありますので、その都度学習すればよいと思います。

 


 

dropshadowは当方自作の dropshadow-custom.js を使用します。
なおこのページはjQuery1.6.4のため dropshadow-custom-ie.js に成ります。

DropShadowと基本的なことは下記記事を参照ください。

【参照】当方の記事: SVG.js を使用してsvgコンテンツを作り表示します

【参照】当方の記事: SVG.js DropShadowの自作とBlur

 

以下の記事を参考にしました。

【参考】dion.ne.jpの記事: svg要素の基本的な使い方まとめ

【参考】atmarkit.co.jpの記事: 10分でわかるSVG 基礎編 (1/5)

【参考】ascii.jpの記事: いまさら聞けないSVG Web制作に便利な3つの理由

【参考】webcreatorbox.comの記事: SVGでアウトラインをカスタマイズしてみよう

【参考】の記事: SVG Stroke プロパティ


コツさえ掴めば結構簡単だが、しごく面倒である。以上。

 


[ この記事のURL ]


タグ:javascript , SVG

 

ブログ記事一覧



[1]