POPSブログ

SVG.js Use,Symbol,Setとその他のメソッド

380

  Category:  javascript2016/02/22 pops 

SVG.js Use,Symbol,Setとその他の使用頻度の高いメソッドについて調べてみます。一部当方独自の方法をも取りますが、一応正常に可動します。何も知らない者が「SVG」を触るのですから大変無謀なことです。

 

SVG.js Use,Symbol,Setとその他のメソッドのテスト

 

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

 

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


基本的な説明下記ページ参照ください。
【参照】当方の記事: SVG.js を使用してsvgコンテンツを作り表示します

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


SVG.js Use,Symbol,Setとその他のメソッド

前ページまでのメソッドを使用する事により、一般的な要素は表示可能です。これよりの説明するメソッド等は必ずしも重要では有りません。規模の大きいコンテンツを作る場合は必要かも知れません。
その都度、多少困った時に利用すれば良いと思います。


手抜き目次

1. use
2. defsに収容してuseで使う
3. symbol / LinkボタンとClickボタンを作る
4. nested (意味有る説明無し)
5. set
6. サンプルJSの全表示

 

use

useメソッドはdefs()に収容するgraphic要素や、symbol()化したgraphic要素を表示する場合に用います。defs()に収容されたgraphic要素は原則「非表示」に成ります。つまりサブルーチン的な役割です。

画像(image)は原則対象外になります。(表示のみなら出来ない事はないが加工などが上手く行かないでショウ)
WebFontは上手く設定しないと表示しませんので、普通のFontを利用したほうが良いでショウ。



グラフィックス要素
キャンバスに描かれる型の要素。 次のもの: circle, ellipse, image, line, path, polygon, polyline, rect, text, use
グラフィックス参照要素
グラフィックス内容として他の文書または要素への参照を用いるグラフィックス要素。 次のもの: image, use

defsに収容してuseで使う

同じグラフィックス要素を使い回しする場合は便利ですが、設定が悪いと陰影、strokeが切れますので注意が必要です。
fill strokeを設定していない場合は後で設定出来ます。この辺は設計の都合によります。

初期位置は左上 00 に成りますので、位置を center(x,y) で登録しておくと、後で都合が良い。
具体的には「長い長い長ーい、パス」を「複数回」利用しなければならない時などに限定した方が良いと思います。


● defsを使用した書き方。


グラフィックス要素を登録
var defs=draw.defs().rect(width,height).center(x,y)

useで呼び出す fill stroke を設定する
var rect=draw.use(defs).attr({fill:'#00F','stroke':'#FFF','stroke-width':2})

位置の調整は .x() .y()で出来ます
rect.x(x値).y(y値)

defsを使用しない書き方。たいした違いは有りません。


1例
var rect=draw.rect(100,100).attr({fill:'#00F','stroke':'#FFF','stroke-width':2}).center(80,80)

● 画像はdefsに登録しないで、その都度使用する時点で設定した方が懸命です。


1例
var image=draw.image('画像パス')...

コードは長くなりますが、振る舞いを知り、有る程度自由に構成できるようになるまで use の使用は避けたほうが良いと思います。コードが短い方が絶賛される傾向が強いが、自由度が落ちますのでその点考慮して下さい。

 

WebFontは大きさの取得が異常で有る。よって、center()計算が狂いNGである。(修正は可能だが、move()などで設定したほうが楽である)、以下サンプルを列挙するが、ドラッグを設定しているのは複数表示の個々が正常である確認のためです。


● SAMPLE 1


サンプルJS



	//エレメントID
	var draw=SVG('graphics-1a').size(160,160)

	//defs
	var defs_parts1=draw.defs().rect(100,100).radius(10).center(80,80)
	//use
	var rect=draw.use(defs_parts1).attr({fill:'#00BFFF'})
	.attr({'filter':'url(#dropShadow2)'})
	.style('cursor','pointer').draggable()

	var txt=draw.text('1 rect表示 drag').font({leading:0.8})

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

	//エレメントID
	var draw=SVG('graphics-1b').size(160,160)

	//use
	var rect=draw.use(defs_parts1).attr({fill:'#00F','stroke':'#FFF','stroke-width':2})
	.attr({'filter':'url(#dropShadow2)'})
	.style('cursor','pointer').draggable()
	//use
	var rect=draw.use(defs_parts1).attr({fill:'#F00'}).x(10).y(10)
	.attr({'filter':'url(#dropShadow2)'})
	.style('cursor','pointer').draggable()

	var txt=draw.text('2 rect、2個 drag').font({leading:0.8})

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

	//エレメントID
	var draw=SVG('graphics-1c').size(160,160)

	var defs_image=draw.defs().image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(100/160)
	//画像塗り
	var rect=draw.use(defs_image)
	.attr({'filter':'url(#dropShadow2)'})
	.style('cursor','pointer').draggable()

	var rect2=draw.use(defs_image).x(10).y(10)
	.attr({'filter':'url(#dropShadow2)'})
	.style('cursor','pointer').draggable()

	var txt=draw.text('3 画像非推奨 drag').font({leading:0.8})



サンプルJS


	//エレメントID
	var draw=SVG('graphics-1d').size(160,160)

	//defs/左上よせは問題だ
	var defs_parts2=draw.defs().rect(100,100).radius(10)
	//use
	var rect=draw.use(defs_parts2).attr({fill:'#FFD700','stroke':'#FFF','stroke-width':3}).move(30,30)
	.attr({'filter':'url(#dropShadow2)'})
	.style('cursor','pointer').draggable()

	var txt=draw.text('4 左上よせは切れる drag').font({leading:0.8})

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

	//エレメントID
	var draw=SVG('graphics-1e').size(160,160)

	//defs/ずらす
	var defs_parts2=draw.defs().rect(100,100).radius(10).move(20,20)

	//use
	var rect=draw.use(defs_parts2).attr({fill:'#FFD700'}).move(10,10)
	.attr({'filter':'url(#dropShadow2)'})
	.style('cursor','pointer').draggable()

	var txt=draw.text('5 defs()をずらす drag').font({leading:0.8})

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

	//エレメントID
	var draw=SVG('graphics-1f').size(160,160)

	//DEFS
	var defs_parts3=draw.defs().rect(100,100).radius(10).center(80,80)
	var defs_parts4=draw.defs().rect(50,50).center(80,80)

	//GROUP
	var group=draw.group()
	group.rect(0,0,160,160)
	//USE
	var rect3=group.use(defs_parts3).attr({'fill':'#FFD700','stroke':'#FFF','stroke-width':2})
	.attr({'filter':'url(#dropShadow2)'})//陰影
	var rect4=group.use(defs_parts4).attr({'fill':'#DA70D6','stroke':'#FFF','stroke-width':2})
	.attr({'filter':'url(#dropShadow2)'})//陰影

	group.style('cursor','pointer').draggable()

	var txt=draw.text('6 defs() OK group drag').font({leading:0.8})


stroke、陰影が必要な場合は最初からずらしておく事。WefFontはクラス設定すれば使える。注意、4.5番WebFontはcenter()が効かない。6番は通常FontだからOKで有る。


サンプルJS


	//エレメントID
	var draw=SVG('graphics-1g').size(160,160)

	//rect/陰影のためずらす
	var defs_rect=draw.defs().rect(120,120).radius(10).attr({fill:'#FFB6C1'}).center(80,80)
	//文字
	var  defs_text=draw.defs().text('POPSWEB')
	.font({
		family:'GauFontMilkChoco'
		,size:16
		,anchor:'left'
		,leading:1
	})
	.addClass('GauFontMilkChoco')//有効
	.attr({fill:'#FF69B4'}).move(28,70)
	.attr({'filter':'url(#dropShadow3)'})

	var rect=draw.use(defs_rect)
	.attr({'filter':'url(#dropShadow2)'})

	var text=draw.use(defs_text)

	var txt=draw.text('7 WebFont center() NG').font({leading:0.8})

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

	//エレメントID
	var draw=SVG('graphics-1h').size(160,160)

	//rect/陰影のためずらす
	var defs_rect2=draw.defs().rect(120,120).radius(10).x(15).y(15)
	var rect2=draw.use(defs_rect2).attr({fill:'#FFDAB9','stroke':'#FFF','stroke-width':2}).move(5,5)
	.attr({'filter':'url(#dropShadow2)'})

	//文字
	var web_text2=draw.text('POPSWEB')
	.font({
		family:'GauFontMilkChoco'
		,size:16
		,anchor:'left'
		,leading:1
	})
	.addClass('GauFontMilkChoco')//有効
	.attr({fill:'#FFD700'}).move(28,70)
	.attr({'filter':'url(#dropShadow3)'})

	var txt=draw.text('8 WebFont center() NG').font({leading:0.8})

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

	//エレメントID
	var draw=SVG('graphics-1i').size(160,160)

	//defs
	var defs_rect3=draw.defs().rect(120,120).radius(10).center(80,80)
	//文字
	var defs_text3=draw.defs().text('POPSWEB')
	.font({
		family:'Arial'
		,size:20
		,anchor:'left'
		,leading:1
	})
	.center(80,80)

	//use
	var rect3=draw.use(defs_rect3).attr({fill:'#87CEFA'})
	.attr({'filter':'url(#dropShadow2)'})
	var text3=draw.use(defs_text3).attr({fill:'#20B2AA'})
	.attr({'filter':'url(#dropShadow3)'})

	var txt=draw.text('9 通常Font center() OK').font({leading:0.8})


 

symbol

複数のグラフィックスを一括して一つのグラフィックスとして扱うことが出来る「シンボル(symbol)」は、defs同様に描画されません(非表示)。useの実行で描画されます。但しグループでは無くコンテナ要素で有り。シンボルに記述したパスなどは一括して描画されます。
要するに、複数パス構成のグラフィックス、或いはボタンなどを作る時に便利で有ると言える。
振る舞いが少し違うので注意ください。
● 下記はレファレンスに記述された例で有る。但し、これは陰影strokeが切れる。


var symbol=draw.symbol()
symbol.rect(100,100).fill('#f09')
var use=draw.use(symbol).move(200,200)

● 陰影strokeが切れない様にするにはcenter()で処理する。最後の位置調整はtranslate() で行う。


var symbol=draw.symbol()
center()処理
symbol.rect(100,100).attr({'fill':'#F09'}).center(80,80)
var use=draw.use(symbol)
移動が必要なら
//use.translate(20,0)

但し、他の要素と違い、一括して描画されるため(パターンと似ている)、後でuseに fill stroke を設定実行すれば全て同様の色になりますので注意が必要です。
詳細は、下記サンプルのコードを参照ください。


1. 初期の原点左上00で有る、各要素毎center()で位置決め
2. 要素毎に着色できるようにするのが理想。
3. テキストが見えるようにする。(IE位置設定注意)
4. 最後の位置調整は、translate() で行うと簡単です。move() x() y()はダメ
5. 別の位置決めなど行う場合はそれなりに自己責任で調整します。
6. パス描画のイラストの場合に活躍するだろう。


1番、陰影strokeが切れる/ 2番、陰影strokeが切れない/ 3番、個別に fills troke を実行


サンプルJS


	//エレメントID
	var draw=SVG('graphics-2a').size(160,160)

	//symbol化
	var symbol=draw.symbol()
	//原点左上00
	symbol.rect(50,50)
	symbol.circle(50)

	//use
	//fill stroke はsymbol設定していないので追加できる
	var use_rect=draw.use(symbol).attr({'fill':'#F09','stroke':'#FFF','stroke-width':2}).move(55,55)
	.attr({'filter':'url(#dropShadow2)'})//陰影は切れる

	var txt=draw.text('1 symbol原点左上00 切れる').font({leading:0.8})

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

	//symbol化
	//対象エレメントID
	var draw=SVG('graphics-2b').size(160,160)

	//symbol化
	var symbol2=draw.symbol()
	//.center()処理をする
	symbol2.rect(50,50).fill('#F09').center(80,80)
	symbol2.circle(50).fill('#00F').center(80,80)

	//strokeはsymbol設定していないので追加できる
	var use_rect3=draw.use(symbol2).attr({'stroke':'#FFF','stroke-width':2})
	.attr({'filter':'url(#dropShadow2)'})//陰影

	var txt=draw.text('2 symbol center(80,80) OK').font({leading:0.8})

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

	//symbol化
	//対象エレメントID
	var draw=SVG('graphics-2c').size(160,160)

	//symbol化
	var symbol3=draw.symbol()
	//.center()処理をする
	symbol3.rect(50,50).attr({'fill':'#F09','stroke':'#FFF','stroke-width':2}).center(80,80)
	symbol3.circle(48).attr({'fill':'#FF69B4'}).center(80,80)
	symbol3.text('symbol')
		.font({
		family:'Arial'
		,size:12
		,anchor:'left'
		,leading:1
	})
	.attr({'fill':'#FFF'}).move(60,70).attr({'filter':'url(#dropShadow3)'})//moveはIEのため
	//.attr({'fill':'#FFF'}).center(80,80).attr({'filter':'url(#dropShadow3)'})//IE以外OK

	//use
	var use_rect3=draw.use(symbol3)
	//.translate(20,0)//必要なら
	.attr({'filter':'url(#dropShadow2)'})//陰影

	var txt=draw.text('3 最後に位置の調整可能').font({leading:0.8})


3番テキスト、center()ではIEが狂うのでmoveで設定した。テキスト入りのボタンは「svg」で作るべきか疑問ですが...
IE11に対応しなければ問題は直ぐ解決します。


moveはIEのため
.attr({'fill':'#FFF'}).move(60,70).attr({'filter':'url(#dropShadow3)'})

IE以外OK
.attr({'fill':'#FFF'}).center(80,80).attr({'filter':'url(#dropShadow3)'})

例がボタンのようで、アクション設定をすればボタンとして機能はします。多機能にするなら別の方法で作った方が良い様です。


LinkボタンとClickボタンを作る

LinkボタンとClickボタンを作ってみました。関数形式にしています。面倒ですから実際使用することは無いでしょう。
symbolで作ってはいない。
ボタン作成のカスタム関数で作っています。詳細は「サンプルJSの全表示」をご覧ください。


Link

下記はSVG.jsマニュアルのHyperlink書式である。

マニュアルの詳細


Hyperlink

A hyperlink or <a> tag creates a container that enables a link on all children:
var link = draw.link('http://svgjs.com')
var rect = link.rect(100, 100)

The link url can be updated with the to() method:
link.to('http://apple.com')

Furthermore, the link element has a show() method to create the xlink:show attribute:
link.show('replace')

And the target() method to create the target attribute:
link.target('_blank')

Elements can also be linked the other way around with the linkTo() method:
rect.linkTo('http://svgjs.com')

Alternatively a block can be passed instead of a url for more options on the link element:
rect.linkTo(function(link) {
  link.to('http://svgjs.com').target('_blank')
})

実際には、下記の様にAリンクを作っただけです。枠とラベルを表示します。A-linkラベルのみ表示は簡単。


var link=対象インスタンス.link(url)
var rect=link.rect()... //枠
var text=link.text()... //A-link

● 簡易手抜き形式、文字を入れるとTEXTが邪魔するので、下に通常TEXTを描画、上枠を半透過させる。結構面倒だ。
下記、サンプルの4 LINK-BTN 参照


//簡易手抜き形式
var linkgroup=draw.group()
linkgroup.rect(60,20).attr({'fill':'#FF69B4','stroke':'#000','stroke-width':1}).center(50,120)
var linktext=linkgroup.text('SnapSVG').font({size:12,leading:0.8}).attr({'fill':'#FFF'}).center(50,120)
var link=linkgroup.link('http://www.h2.dion.ne.jp/~defghi/snapsvg/snapsvg.xhtml')
var rect=link.rect(60,20).attr({'fill':'rgba(0,0,0,0.01)'}).center(50,120)//透過
linkgroup.style('cursor','pointer')

Events

Basicな形式、リスナー形式、カスタムイベント形式があるが、clickアクションタイプは「Basicな形式」を利用しています。場合によっては「リスナー形式」でなければ成らない事もありますので使い分けます。

● Eventの種類


click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove,
touchstart, touchmove, touchleave, touchend and touchcancel

● 一般的なclickアクション


対象インスタンス.click(function(){
	//処理
	this.....
})

--------------------------------------------------
on形式、同じです

対象インスタンス.on('click',function(){
	//処理
	this.....
})

● on形式


var click=function(){
	//処理
	this....
}

対象インスタンス.on('click', click)

● 変数などの受け渡し
アクションの関数内部は別世界であるので、Events対象インスタンスに attr() で受け渡したい変数を登録しておけば良い。
data()メソッドを利用しても良いが、attr()で事足りる。


var no=1
対象インスタンス.attr({'no':no})

var click=function(){
	var no=this.attr('no')
	//処理
	this....
}

下記はSVG.jsマニュアルのEvents書式である。

マニュアルの詳細


//Basic events//

Events can be bound to elements as follows:
rect.click(function() {
  this.fill({ color: '#f06' })
})

Removing it is quite as easy:
rect.click(null)
All available events are: click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove, touchstart, touchmove, touchleave, touchend and touchcancel.
returns: itself

//Event listeners//

You can also bind event listeners to elements:
var click = function() {
  this.fill({ color: '#f06' })
}

rect.on('click', click)
returns: itself

Unbinding events is just as easy:
rect.off('click', click)

Or to unbind all listeners for a given event:
rect.off('click')

Or even unbind all listeners for all events:
rect.off()

● SAMPLE 2

ボタン類を作ってみた、実際使用することは無いと思う。(誰しもCSSで作るで在ろう)


サンプルJS


	//LinkボタンとClickボタン
	//対象エレメントID
	var draw=SVG('graphics-2d').size(160,160)

	var txt=draw.text('4 LINK-BTN').font({leading:0.8})

	//ボタン
	//陰影用にgroup大きく作る
	//create-BTN /draw label width height fillcolor strokecolor labelcolor url
	var btn1=createLinkBtn(draw,'Link',40,16,'#f00','#000','#fff','http://svgjs.com').cx(20).cy(30)
	btn1.attr({'filter':'url(#dropShadow2)'})//陰影

	var btn2=createLinkBtn(draw,'coliss',40,16,'#00f','#000','#fff','http://coliss.com/').cx(20).cy(60)

	//----
	var txt=draw.text('svgjs.com').font({leading:0.8}).move(80,30)
	var txt=draw.text('coliss.com').font({leading:0.8}).move(80,60)
	var txt=draw.text('Snap.svgの使い方まとめ').font({size:10,leading:0.8}).move(10,95)
	//----

	//簡易手抜き形式
	var linkgroup=draw.group()
	linkgroup.rect(60,20).attr({'fill':'#FF69B4','stroke':'#000','stroke-width':1}).center(50,120)
	var linktext=linkgroup.text('SnapSVG').font({size:12,leading:0.8}).attr({'fill':'#FFF'}).center(50,120)
	var link=linkgroup.link('http://www.h2.dion.ne.jp/~defghi/snapsvg/snapsvg.xhtml')
	var rect=link.rect(60,20).attr({'fill':'rgba(0,0,0,0.01)'}).center(50,120)//透過
	linkgroup.style('cursor','pointer')

	//A-linkのみ
	var alink=draw.link('http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm')
	var a_text=alink.text('svg要素の基本的な使い方').font({size:10,leading:0.8}).attr({'fill':'#F00'}).center(80,140)

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

	//Clickボタン
	//対象エレメントID
	var draw=SVG('graphics-2e').size(160,160)

	var demo_fill=draw.rect(40,40).attr({'fill':'#40E0D0','stroke':'#FFF','stroke-width':2}).center(80,60)
	.attr({'filter':'url(#dropShadow2)'})//陰影

	//陰影用にgroup大きく作る
	//create-ClickBTN /draw label width height fillcolor strokecolor labelcolor
	var clickbtn1=createClickBtn(draw,'BTN',40,16,'#B8860B','#000','#fff').cx(20).cy(100)
	clickbtn1.attr({'filter':'url(#dropShadow2)'})//陰影
	//ACTION
	clickbtn1.click(function() {
		demo_fill.animate().rotate(360)
	})

	//CSS3 textshadowテスト OK
	clickbtn1.addClass('clickbtn')

	//group無し、丸ボタン
	//通常のcircle
	var circle_btn=draw.circle(15).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(40,140)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	//ACTION
	circle_btn.click(function() {
		demo_fill.animate().rotate(-360)
	})

	var txt=draw.text('5 BTN RECT回転します').font({leading:0.8})

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

	//HOVERボタン
	//対象エレメントID
	var draw=SVG('graphics-2f').size(160,160)

	var demo_fill2=draw.rect(40,40).attr({'fill':'#40E0D0','stroke':'#FFF','stroke-width':2}).center(80,60)
	.attr({'filter':'url(#dropShadow2)'})//陰影

	//陰影用にgroup大きく作る
	//create-HoverBTN /draw label width height fillcolor strokecolor labelcolor
	var hoverbtn1=createHoverBtn(draw,'H-BTN',40,16,'#B8860B','#000','#fff').cx(20).cy(100)
	hoverbtn1.attr({'filter':'url(#dropShadow2)'})//陰影
	//ACTION
	hoverbtn1.click(function() {
		demo_fill2.animate().rotate(360)
	})

	//group無し、丸ボタン
	//通常のcircle
	var circle_btn2=draw.circle(15).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(40,140)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	//HOVER-HOVEROUT
	circle_btn2.mouseover(function(){
  		this.attr({'fill':'#FFD700'})
	})
	circle_btn2.mouseout(function(){
  		this.attr({'fill':'#FF0000'})
	})
	//CLICK-ACTION
	circle_btn2.click(function() {
		demo_fill2.animate().rotate(-360)
	})

	var txt=draw.text('6 HOVER-BTN 回転します').font({leading:0.8})


1番目はHOVER改善。2番目はトグルボタンにした。3番目はイイカゲンだ。


サンプルJS



	//HOVERボタン2
	//対象エレメントID
	var draw=SVG('graphics-2g').size(160,160)

	var demo_fill3=draw.rect(40,40).attr({'fill':'#40E0D0','stroke':'#FFF','stroke-width':2}).center(80,60)
	.attr({'filter':'url(#dropShadow2)'})//陰影

	//陰影用にgroup大きく作る
	//注意、create-HoverBTN2 /draw label width height fillcolor strokecolor labelcolor
	var hoverbtn3=createHoverBtn2(draw,'H-BTN',40,16,'#B8860B','#000','#fff').cx(20).cy(100)
	hoverbtn3.attr({'filter':'url(#dropShadow2)'})//陰影
	//ACTION
	hoverbtn3.click(function() {
		demo_fill3.animate().rotate(360)
	})

	//group無し、丸ボタン
	//通常のcircle
	var circle_btn3=draw.circle(15).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(40,140)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	//HOVER-HOVEROUT
	circle_btn3.mouseover(function(){
  		this.attr({'fill':'#FFD700'})
	})
	circle_btn3.mouseout(function(){
  		this.attr({'fill':'#FF0000'})
	})
	//CLICK-ACTION
	circle_btn3.click(function() {
		demo_fill3.animate().rotate(-360)
	})

	var txt=draw.text('7 HOVER-BTN2 回転します').font({leading:0.8})

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

	//フィルターBlurクリックテスト
	//対象エレメントID
	var draw=SVG('graphics-2h').size(160,160)

	//image 100x100
	var image_blur=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)

	//ボタン
	var test_btn5=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	test_btn5.click(blur_image)

	//Func/toggleClass
	function blur_image(){
		image_blur.toggleClass('blur-on')
		if(image_blur.hasClass('blur-on')) {
			image_blur.filter(function(add) {
  				add.gaussianBlur(3)
			})
		}else{
			image_blur.filter(function(add) {
  				add.gaussianBlur(0)
			})
		}
	}

	var txt=draw.text('8 ボタンを押す Blur on/off').font({leading:0.8})

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

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

	//svg1
	var nest1=draw.nested().size(60,60)
	nest1.x(10).y(50)

	//
	var back1=nest1.rect(60,60).attr({'fill':'rgba(0,0,0,0.2)'})
	var rect1=nest1.rect(20,20).attr({'fill':'#FF0000','stroke':'#000','stroke-width':1}).center(30,30)

	//svg2
	var nest2=draw.nested().size(60,60)
	nest2.x(90).y(50)
	var back2=nest2.rect(60,60).attr({'fill':'rgba(0,0,0,0.2)'})
	var rect2=nest2.rect(20,20).attr({'fill':'#FF00FF'}).center(30,30)
	.attr({'filter':'url(#dropShadow2)'})//陰影

	var txt=draw.text('9 nested()').font({leading:0.8})


 

nested

SVG.jsを実行すれば「svg」がつくられますが、その中にネストした「svg」を作ります。Graphic描画単位の違う「svg」を実行する場合などに用いますが詳細は省略します。


var nested=draw.nested()

var rect=nested.rect(200,200)

 

set

要素の集まりを表すオブジェクトです。つまり操作対象のグループ化といえます。まとめて同一プロパティを変更したり便利になります。詳細はマニュアルを参照ください。


1. 「g」グループでは有りません。現在表示中の要素の「指定する操作対象」を「一まとめ」にします。
2. 同一プロパティを変更出来ますので便利ですが、陰影、ドラッグは個々に設定されます。重なり順は変わりません。
3. TEXTの場合はドラッグが合わない場合があります。(作り方による)
4. セット化された要素は配列に保存されますので、個別にアクセス可能です。
5. 上手く効率的になるように設計が大事ですから、慣れて来てからの課題と思います。


● 設定、例としてrect1 rect2 rect3、をマトメます。名前は自由です。
グループと違い、add()の順序を変えても重なり順は同じ「表示されている順」です。


//要素
var rect1=draw.rect(100,100)...
var rect2=draw.circle(60)...
var rect3=draw.text('TEXT')...

setでマトメる、オブジェクト名は自由
var set=draw.set()
set.add(rect1).add(rect2).add(rect3)
または
set.add(rect1,rect2,rect3)

全てに陰影処理
var set.attr({'filter':'url(#dropShadow2)'})

● 個別に操作出来ます。


0番目の要素
set.get(0)....

eachで個別に操作/ thisは個別の要素をさす
set.each(function(i){
	this.attr({fill:'#FFF'})
})

lengthは次で取得可能
set.members.length

● SAMPLE 3

振る舞いの違いを認識するのが大事のようだ。イラストの場合に活躍するだろう。

2番、TEXTのstroke処理は文字が読めなくなる場合があるので注意。


サンプルJS


	//set化
	//対象エレメントID
	var draw=SVG('graphics-3a').size(160,160)

	var rect1=draw.rect(80,80).radius(10).attr({fill:'#ccc','stroke':'#FFF','stroke-width':2})
	var rect2=draw.circle(60).attr({fill:'#f00'})
	var rect3=draw.text('TEXT')
	.font({
		family:'Arial'
		,size:12
		,anchor:'left'
		,leading:1
	})
	.attr({'fill':'#FFF'})//.attr({'filter':'url(#dropShadow3)'})

	//set化
	var set=draw.set()
	set.add(rect1).add(rect2).add(rect3)
	.center(80,80)
	.style('cursor','pointer').draggable()
	.attr({'filter':'url(#dropShadow2)'})//陰影

	var txt=draw.text('1 set drag TEXT注意').font({leading:0.8})

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

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

	var rect1=draw.rect(80,80).radius(10).attr({fill:'#ccc','stroke':'#FFF','stroke-width':2})
	var rect2=draw.circle(60).attr({fill:'#f00'})
	var rect3=draw.text('TEXT')
	.font({
		family:'Arial'
		,size:12
		,anchor:'left'
		,leading:1
	})
	.attr({'fill':'#FFF'})//.attr({'filter':'url(#dropShadow3)'})

	//set化
	var set2=draw.set()
	set2.add(rect1).add(rect2).add(rect3)
	.center(80,80)
	.attr({fill:'#FF0','stroke':'#000','stroke-width':2})
	.attr({'filter':'url(#dropShadow2)'})//陰影

	var txt=draw.text('2 set2 fill stroke変更').font({leading:0.8})

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

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

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

	var rect1=draw.rect(100,100).radius(10).attr({fill:image,'stroke':'#FFF','stroke-width':2})
	var rect2=draw.circle(60).attr({fill:'#f00'})
	var rect3=draw.text('TEXT')
	.font({
		family:'Arial'
		,size:12
		,anchor:'left'
		,leading:1
	})
	.attr({'fill':'#FFF'})//.attr({'filter':'url(#dropShadow3)'})

	//set化
	var set3=draw.set()
	set3.add(rect1).add(rect2).add(rect3)
	.center(80,80).rotate(30)
	.attr({'filter':'url(#dropShadow2)'})//陰影

	var txt=draw.text('3 set3 画像塗り回転OK').font({leading:0.8})


3番目のアニメの場合は重宝する。(陰影はグループに設定しているので文字には掛からない)


サンプルJS


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

	var rect1=draw.rect(80,80).radius(10).attr({fill:'#ccc','stroke':'#FFF','stroke-width':2})
	var rect2=draw.circle(60).attr({fill:'#f00'})
	var rect3=draw.text('TEXT')
	.font({
		family:'Arial'
		,size:12
		,anchor:'left'
		,leading:1
	})
	.attr({'fill':'#FFF'})//.attr({'filter':'url(#dropShadow3)'})

	//set化
	var set4=draw.set()
	set4.add(rect1).add(rect2).add(rect3)
	.center(80,80)
	.attr({'filter':'url(#dropShadow2)'})//陰影

	//個別に操作
	set4.get(0).attr({fill:'#F00'})
	set4.get(1).attr({fill:'#0FF'})
	set4.get(2).attr({fill:'#F00'})

	var txt=draw.text('4 set 個別に操作').font({leading:0.8})

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

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

	var rect1=draw.rect(80,80).radius(10).attr({fill:'#ccc','stroke':'#FFF','stroke-width':2})
	var rect2=draw.circle(60).attr({fill:'#f00'})
	var rect3=draw.text('TEXT')
	.font({
		family:'Arial'
		,size:12
		,anchor:'left'
		,leading:1
	})
	.attr({'fill':'#FFF'})//.attr({'filter':'url(#dropShadow3)'})

	//set化
	var set5=draw.set()
	set5.add(rect1).add(rect2).add(rect3)
	.center(80,80)

	//eachで個別に操作
	set5.each(function(i){
		if(i==0){this.attr({fill:'#FFF'}).attr({'filter':'url(#dropShadow)'})}
		if(i==1){this.attr({fill:'#CCC'}).attr({'filter':'url(#dropShadow2)'})}
		if(i==2){this.attr({fill:'#00F'}).attr({'filter':'url(#dropShadow3)'})}
	})

	var txt=draw.text('5 set eachで個別に操作').font({leading:0.8})


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

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

	//グループの大きさと中心位置
	var group_w=160,group_h=160,
	c_x=160/2,c_y=160/2

	//グループ
	var move_group=draw.group()
	move_group.rect()
	//SETインスタンス
	var set6=draw.set()

	var roundrects=[],spikes=12,a=360/spikes,point_x=80,point_y=80,radius_v=50,
	angle12=-90 //12時補正

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

		//虹色hsl直接
		var angle_no=Math.floor(i/spikes*360)//0-360
		var color='hsl(' + angle_no + ',100%,50%)'

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

		//group.group
		roundrects[i]=move_group.group()
		roundrects[i].rect()

		//roundrect虹色
		roundrects[i].rect(20,20).radius(5,5).attr({'fill':color,'stroke':'#FFF','stroke-width':2}).center(x,y).rotate(i*a)
		.attr({'filter':'url(#dropShadow2)'})//陰影
		//TEXT
		roundrects[i].text(''+(i+1)).font({leading:0.8}).center(x,y).rotate(i*a)

		//グループ個別に操作
		roundrects[i].rotate(30)
		//SET登録
		set6.add(roundrects[i])

	}

	//丸ボタン
	var circle_btn5=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')

	//リスナー
	var click=function(){

		//animateは効率がわるい
		set6.animate(1000).rotate(360).after(function() {
			this.animate(1000).rotate(0)
		})

	}

	//EVENT
	circle_btn5.on('click',click)

	var txt=draw.text('6 W-Group化 click回転').font({leading:0.8})


 

CSS

line-heightは重要です。「IE11」でページのline-heightが「svg」TEXTに影響を与えるため、その修正処置です。

詳細は、「SVG.js TEXT表示とTEXTマスク」を参照ください。


.graphic-elm{
line-height:1.15;
width:160px;
height:160px;
margin-left:10px;
padding:0;
border:#000000 1px solid;
float:left;
overflow:hidden;
}

 

サンプルJSの全表示

Chromeは文字化けしますのでエンコード(UTF-8)してご覧ください。

● サンプルJSの全表示1(解説ページ用) svg-sample7.js

 


 

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

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

【参照】当方の記事: SVG.js グラデーションとパターン

【参照】当方の記事: SVG.js TEXT表示とTEXTマスク

【参照】当方の記事: SVG.js 図形とパスの描画

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

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


以下の記事を参考にしました。直接関係有りませんが、

【参考】: Snap.svgの使い方まとめ


以上。

 


[ この記事のURL ]


タグ:SVG , javascript

 

ブログ記事一覧



[1]