POPSブログ

SVG.js グラデーションとパターン

379

  Category:  javascript2016/02/18 pops 

SVG.js グラデーションとパターンについて調べてみます。一部当方独自の方法をも取りますが、一応正常に可動します。何も知らない者が「SVG」を触るのですから大変無謀なことです。

 

SVG.js グラデーションとパターンのテスト

 

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

 

DEMO グラデーションとパターンの「デモ」

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


Chromeでの閲覧を推奨します


DEMO、このページに収容できない、グラデーションとパターンに関連する「デモ」です。

DEMO-039




 

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


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


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


グラデーションとパターン表示

グラデーションとパターンについて調べてみました、グラデーションは比較的単純ですが、CSSなどと形式はほぼ同じですから比較的容易です。
パターンはパスなど簡単に重ねることが出来ますので、複雑なパターンも可能と思います。(実際作るかは別問題ですが...)


グラデーション

ライングラデーション、ラジアルグラデーションの2種類が用意されています。その他の特殊なグラデーションなどはちょっと作るのが難しいようです。出来るかたは挑戦して下さい。

 

ライングラデーション (linear)

色を決定して「色の間隔」「gradientの方向」を設定、fillにgradientを塗ればよい。「svg」グラデーションの規定に順次ます。

下記例では2色ですが、何色でも設定できます。rgba()で設定すれば透明度も合わせて設定可能です。
色は「#FF0613」「#FFF」などと書いても、出力の際SVG.jsで自動的に「#ff0613」「#fff」と変換されます。気にする必要は有りません。



書式
offsetと色を設定します、rgba形式の記述も出来ます
stop.at(0,'#333')
stop.at(0,'#333333')
stop.at(0,'rgb(51,51,51)')
stop.at(0,'rgba(51,51,51,1)')

または
stop.at({offset:0,color:'#333',opacity:1})

zu

 

SVG.jsのライングラデーション設定は次の様に成ります。


//グラデ塗り
var gradient=draw.gradient('linear',function(stop){
  	stop.at(0,'#000')
  	stop.at(1,'#FFF')
})

//gradientの方向 
gradient.from(0,0).to(1,0) //左から右に

//gradient-rect
var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)


gradient.from(0,0).to(1,0) // 左から右に/default
gradient.from(1,0).to(0,0) // 右から左に
gradient.from(0,0).to(0,1) // 上から下に
gradient.from(0,0).to(0,1) // 下から上に
gradient.from(0,0).to(1,1) // 左上から右下に
gradient.from(1,1).to(0,0) // 右下から左上に
gradient.from(1,0).to(0,1) // 右上から左下に
gradient.from(1,0).to(0,1) // 左下から右上に

● SAMPLE 1


サンプルJS


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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#000')
  		stop.at(1,'#FFF')
	})

	//gradientの方向
	gradient.from(0,0).to(1,0) // 左から右に/default
	//gradient.from(1,0).to(0,0) // 右から左に
	//gradient.from(0,0).to(0,1) // 上から下に
	//gradient.from(0,0).to(0,1) // 下から上に
	//gradient.from(0,0).to(1,1) // 左上から右下に
	//gradient.from(1,1).to(0,0) // 右下から左上に
	//gradient.from(1,0).to(0,1) // 右上から左下に
	//gradient.from(1,0).to(0,1) // 左下から右上に

	//gradient-rect
	var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)

	var text=draw.text('1 linear 左から右に').font({leading:0.8})

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

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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#000')
  		stop.at(1,'#00F')
	})
	//gradientの方向
	gradient.from(1,1).to(0,0) //右下から左上に

	//gradient-rect
	var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)

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

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

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

	//グラデ塗り3色
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#FF0000')
		stop.at(0.5,'#FFFF00')
  		stop.at(1,'#00FF00')
	})
	//gradientの方向
	gradient.from(0,0).to(0,1) //上から下に

	//gradient-rect
	var rect=draw.rect(100,100).radius(10).attr({'fill':gradient,'stroke':'#FFF','stroke-width':2}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

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


5番はTEXTのグラデーション位置です、結果、6番の様に描画されます。


サンプルJS


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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#000')
  		stop.at(1,'#F00')
	})
	//gradientの方向
	gradient.from(1,1).to(0,0) //右下から左上に

	//gradient-rect
	var rect=draw.rect(100,100).fill(gradient).center(80,80)

	var text=draw.text('4 fill(gradient)形式').font({leading:0.8})

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

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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#FFF')
  		stop.at(1,'#000')
	})
	gradient.from(0,0).to(0,1) //下から上に

	//文字非表示
	var text=draw.text('POPS')
	.font({
		family:'Arial'
		,size:50
		,'font-weight':'bolder'
		,anchor:'left'
		,leading:1
	})

	//大きさ取得
	var txdata=text.bbox()
	var tw=Math.round(txdata.width)
	var th=Math.round(txdata.height)
	var rect=draw.rect(tw,th).attr({'fill':gradient,'stroke':'#00F','stroke-width':1}).center(80,80)
	text.hide()
	var mv_x=(160-tw)/2
	var mv_y=(160-th)/2

	//文字2
	var text2=draw.text('POPS')
	.font({
		family:'Arial'
		,size:50
		,'font-weight':'bolder'
		,anchor:'left'
		,leading:1
	})

	text2.attr({fill:'#000'}).x(mv_x).y(mv_y)//.move(mv_x,mv_y)

	var txt=draw.text('5 gradientの位置').font({leading:0.8})

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

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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#FFF')
  		stop.at(1,'#000')
	})
	gradient.from(0,0).to(0,1) // 下から上に

	//文字3
	var text3=draw.text('POPS')
	.font({
		family:'Arial'
		,size:50
		,'font-weight':'bolder'
		,anchor:'left'
		,leading:1
	})

	text3.attr({fill:gradient}).x(mv_x).y(mv_y)//.move(mv_x,mv_y)

	var txt=draw.text('6 gradient').font({leading:0.8})


gradientTransform (グラデーションの変形)

グラデーションの変形のTransformに成ります。パターンの中で使用するとずれる場合があります。

transform属性と同様に、matrix,translate,rotate,scale,skewX,skewY関数をカンマ区切りで列挙
回転は品質が悪く実用的ではない(どうでも良いがIE11はOK、将来的には改善されるでしょうが、いつの日かは判りません)。
縦横scale設定してもサイノメにはなりません。



グラデーションの変形
//追加メソッド 
spreadMethod:		pad repeat reflect
gradientTransform:	scale(x,y)

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

gradient.attr({'spreadMethod':'repeat','gradientTransform':'scale(0.333,1)'})

回転に関しては、SVG.jsにrotate()があるから、下記でも回転はするが振る舞いは少し変です。余り使用しないほうが懸命かも知れない。skewXについても同じと思う。(2016/08/01追加します)


少し変です
gradient.rotate(30)//linearの場合rotate()利用時、from()to()の設定をしない
gradient.skewX(30)//現在未対応と思うので機能しない

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

現在機能するメソッドは3種類のみ

グラデインスタンス.scale(縮尺比率).rotate(角度値).translate(xyの位置比率)

このグラデーション部分に関しての詳細テストは、下記の追加記事をご覧ください。
【参照】当方の記事: SVG.js グラデーションとパターンについて(追加)


● gradientTransform SAMPLE


サンプルJS


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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#000')
  		stop.at(1,'#FFF')
	})

	//gradientの方向
	gradient.from(0,0).to(1,0) //左から右に
	//追加メソッド pad repeat reflect
	gradient.attr({'spreadMethod':'pad','gradientTransform':'scale(0.5,1)'})

	//gradient-rect
	var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

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

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

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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#000')
  		stop.at(1,'#FFF')
	}).size(100,100)

	//gradientの方向
	gradient.from(0,0).to(1,0) //左から右に
	//追加メソッド pad repeat reflect
	gradient.attr({'spreadMethod':'repeat','gradientTransform':'scale(0.25,1)'})

	//gradient-rect
	var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

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

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

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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#000')
  		stop.at(1,'#FFF')
	})

	//gradientの方向
	gradient.from(0,0).to(1,0) //左から右に
	//追加メソッド pad repeat reflect
	gradient.attr({'spreadMethod':'reflect','gradientTransform':'scale(0.2,1)'})

	//gradient-rect
	var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

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


注意、縦横リピートしても分割にはならない。回転は品質が悪く実用的ではない。(30度回転指定で実際15度で有る、色々と変な面があるのでここで回転はさせるべきではない)

5番 回転が汚いので、パターン化して修正したものは「パターン表示サンプル4」1,4番 「グラデパターンで塗る」参照ください。


サンプルJS


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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#000')
  		stop.at(1,'#FFF')
	})

	//gradientの方向
	gradient.from(0,0).to(0,1) //上から下に
	//追加メソッド pad repeat reflect
	gradient.attr({'spreadMethod':'repeat','gradientTransform':'scale(1,0.25)'})

	//gradient-rect
	var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

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

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

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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#000')
  		stop.at(1,'#FFF')
	})

	//gradientの方向
	gradient.from(0,0).to(1,0) //左から右に
	//追加メソッド pad repeat reflect
	gradient.attr({'spreadMethod':'repeat','gradientTransform':'scale(0.25,1),rotate(30)'})

	//gradient-rect
	var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

	var txt=draw.text('5 repeat 回転品質悪し').font({leading:0.8})

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

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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#000')
  		stop.at(1,'#FFF')
	})

	//gradientの方向
	gradient.from(0,0).to(1,1) //左上から右下に
	//追加メソッド pad repeat reflect
	gradient.attr({'spreadMethod':'repeat','gradientTransform':'scale(0.2,0.2)'})

	//gradient-rect
	var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

	var txt=draw.text('6 repeat scale xy').font({leading:0.8})


TEXT使用の注意点

「IE11」でページ設定の line-height の影響でTEXT高さが異常になりますので、以下の様にCSS補正しています。
補正しても、ブラウザ毎に高さ取得値に若干の違いがある為に、多少グラデーションに違いがでますので了承下さい。



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

offset値などをインスタンス化すれば、個別にupdate()メソッドで変更出来ます。
下記、SAMPLE2、2番 参照ください。


//グラデ塗り3色
var s1,s2,s3
var gradient=draw.gradient('linear',function(stop){
	s1=stop.at(0,'#FF0000')
	s2=stop.at(0.5,'#FFFF00')
	s3=stop.at(1,'#00FF00')
})
s2.update(0.5,'#00BFFF')

attr()でも変更できますが、グラデーション設定全てを再設定しなければなりませんので非効率です。
下記、SAMPLE2、1番 参照ください。


● SAMPLE 2

1番 attr()で全色変更、非効率 / 2番 update()で指定色変更 / 3番 animate()で色変更


サンプルJS


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

	//グラデ塗り3色
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#FF0000')
		stop.at(0.5,'#FFFF00')
  		stop.at(1,'#00FF00')
	})
	//gradientの方向
	gradient.from(0,0).to(0,1)

	//gradient-rect
	var rect_grad=draw.rect(100,100).attr({'fill':gradient}).center(80,80)

	//ボタン2
	var test_btn2=draw.circle(10).attr({'fill':'#00BFFF','stroke':'#FFF','stroke-width':2}).center(120,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	test_btn2.click(function(){
		//色の変更
		var gradient=draw.gradient('linear',function(stop){
  			stop.at(0,'#FF0000')
			stop.at(0.5,'#00BFFF')
  			stop.at(1,'#00FF00')
		})
		gradient.from(0,0).to(0,1)
		rect_grad.attr({'fill':gradient})
	})
	//ボタン3
	var test_btn3=draw.circle(10).attr({'fill':'#FFFF00','stroke':'#FFF','stroke-width':2}).center(140,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	test_btn3.click(function(){
		//色の変更
		var gradient=draw.gradient('linear',function(stop){
  			stop.at(0,'#FF0000')
			stop.at(0.5,'#FFFF00')
  			stop.at(1,'#00FF00')
		})
		gradient.from(0,0).to(0,1)
		rect_grad.attr({'fill':gradient})
	})

	var text=draw.text('1 linear 3色 click').font({leading:0.8})

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

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

	//グラデ塗り3色
	var s1,s2,s3
	var gradient=draw.gradient('linear',function(stop){
  		s1=stop.at(0,'#FF0000')
		s2=stop.at(0.5,'#FFFF00')
  		s3=stop.at(1,'#00FF00')
	})
	//gradientの方向
	gradient.from(0,0).to(0,1)

	//gradient-rect
	var rect_grad2=draw.rect(100,100).attr({'fill':gradient}).center(80,80)

	//ボタン4
	var test_btn4=draw.circle(10).attr({'fill':'#00BFFF','stroke':'#FFF','stroke-width':2}).center(120,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	test_btn4.click(function(){
		//色の変更
		s2.update(0.5,'#00BFFF')
	})
	//ボタン5
	var test_btn5=draw.circle(10).attr({'fill':'#FFFF00','stroke':'#FFF','stroke-width':2}).center(140,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	test_btn5.click(function(){
		//色の変更
		s2.update(0.5,'#FFFF00')
	})

	var text=draw.text('2 linear 3色 click').font({leading:0.8})

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

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

	var group=draw.group()
	//グラデ塗り2色
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'rgba(0,0,0,1)')
		stop.at(1,'rgba(0,0,0,0)')
	})
	//gradientの方向
	gradient.from(1,1).to(0,0) //右下から左上に

	//back
	var rect_anime=group.rect(100,100).attr({'fill':'#FF0000'}).center(80,80)
	//gradient-rect
	var rect_grad5=group.rect(100,100).attr({'fill':gradient}).center(80,80)

	//ボタン1
	var test_btn1=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(140,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	test_btn1.click(function(){
		//色の変更animate
		rect_anime.animate(2000).attr({'fill':'#00CED1'}).after(function(){
			this.animate(2000).attr({'fill':'#FF0000'})
		})
		
	})

	var text=draw.text('3 重ね2色 click').font({leading:0.8})


 

ラジアルグラデーション (radial)

ラジアルグラデーション。中心位置、焦点の位置、半径を操作してグラデーションを作ります


cx,cy
グラデーションの中心位置.既定値は50%
fx,fy
焦点の位置.既定値は中心と同じ位置
r
グラデーション半径.既定値は50%

図の様に、0.2 の場所が「焦点の位置」、0.5 の場所が「中心位置」です。
radius も比率で設定します。縦横の大きさが違う場合は大きい方を 1 として設定します。


zuzu

 

SVG.jsのラジアルグラデーション設定は次の様に成ります。



//グラデ塗り
var gradient=draw.gradient('radial',function(stop){
	stop.at(0,'#333')
	stop.at(1,'#fff')
})

//gradientの半径	
gradient.from(0.5, 0.5).to(0.5, 0.5).radius(0.5)

//gradient-rect
var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)

offset値などをインスタンス化すれば、個別にupdate()メソッドで変更出来ます。


var s1,s2,s3
draw.gradient('radial',function(stop) {
	s1=stop.at(0,'#000')
	s2=stop.at(0.5,'#f03')
	s3=stop.at(1,'#066')
})

s1.update(0.1,'#0f0',1)

attr()でも変更できますが、グラデーション設定全てを再設定しなければなりませんので非効率です。


● SAMPLE 3


サンプルJS


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

	//グラデ塗り
	var gradient=draw.gradient('radial',function(stop){
  	stop.at(0,'#000')
  	stop.at(1,'#F00')
	})

	//gradientの半径
	gradient.from(0.5, 0.5).to(0.5, 0.5).radius(0.5)

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

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

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

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

	//グラデ塗り
	var gradient=draw.gradient('radial',function(stop){
  	stop.at(0,'#F00')
  	stop.at(1,'#000')
	})

	//gradientの半径
	gradient.from(0.5, 0.5).to(0.5, 0.5).radius(0.5)

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

	var text=draw.text('2 radial radius(0.5)').font({leading:0.8})

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

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

	//グラデ塗り
	var gradient=draw.gradient('radial',function(stop){
  	stop.at(0,'#F00')
  	stop.at(1,'#000')
	})

	//gradientの半径
	gradient.from(0.2, 0.2).to(0.5, 0.5).radius(0.75)

	//gradient-circle
	//var rect=draw.rect(100,100).attr({'fill':gradient,'stroke':'#000','stroke-width':1}).center(80,80)
	var rect=draw.rect(100,100).attr({'fill':gradient}).center(80,80)

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

	var text=draw.text('3 radial radius(0.75)').font({leading:0.8})



サンプルJS


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

	//グラデ塗り
	var gradient=draw.gradient('radial',function(stop){
  	stop.at(0,'#F00')
  	stop.at(1,'#000')
	})

	//gradientの半径
	gradient.from(0.5, 0.5).to(0.5, 0.5).radius(0.5)

	//gradient-rect
	var rect=draw.rect(120,80).attr({'fill':gradient,'stroke':'#000','stroke-width':1}).center(80,80)

	var text=draw.text('4 radial縦横大きさ違い').font({leading:0.8})

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

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

	//グラデ塗り
	var gradient=draw.gradient('radial',function(stop){
  	stop.at(0,'#F00')
  	stop.at(1,'#000')
	})

	//gradientの半径
	gradient.from(0.2, 0.2).to(0.5, 0.5).radius(0.75)

	//gradient-circle
	var rect=draw.circle(100).attr({'fill':gradient,'stroke':'#FFF','stroke-width':2}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

	var text=draw.text('5 radial circle').font({leading:0.8})

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

	//グラデ塗り2層
	//対象エレメントID
	var draw=SVG('gradient-3f').size(160,160)

	//グラデデータ1
	var gradient=draw.gradient('radial',function(stop){
  		stop.at(0,'#FE3891')//#A6023C/#FFB6C1
  		stop.at(1,'#A6023C')//#FE3891/#FF1493
	})
	//gradientの方向1
	gradient.from(0.25,0.25).to(0.5,0.5).radius(100/160)

	//グラデデータ2
	var gradient2=draw.gradient('radial',function(stop){
  		stop.at(0,'rgba(255,255,255,1)')
  		stop.at(0.25,'rgba(255,255,255,0)')
		stop.at(0.6,'rgba(0,0,0,0)')
		stop.at(1,'rgba(0,0,0,0.8)')
	})
	//gradientの方向2
	gradient2.from(0.25,0.25).to(0.5,0.5).radius(0.75)

	//gradient-circle1
	var rect=draw.circle(100).attr({'fill':gradient}).center(80,80)
	//gradient-circle2
	var rect=draw.circle(100).attr({'fill':gradient2}).center(80,80)

	var text=draw.text('6 グラデ塗り radial 2層').font({leading:0.8})


パターン表示

パターンは原則、パスなどのgraphic要素で作ります。SVG.jsでは次の様に成ります。
パターンを作り重ねてゆきます。簡単に追加構成できるのは便利です。具体的にはサンプルを参照ください。

パターンは概ね、パスで構成されますから作るのが大変。よってどれだけ利用されるかは疑問です。
パターンは四方連続模様が理想ですから、尚更パス描画が大変です。私はヤメトキます。


注意、パターンの「グラデーション」「パス」はdraw層の原点(左上)を基準として描画されます。

重要、グラデーションをパターン化するとずれるので、グラデーションをdefs化すると原点が合う。この場合center()が機能します。(サンプル 1,4 参照)


下記は、パターンの大きさ10x10が、インスタンス100x100にリピートして描画されます。


パターンの大きさを決定してパターン要素を重ねる、.drawは記述しないので注意、
//pattern
var pattern=draw.pattern(10,10,function(add) {
	//パターンを重ねる
	add.rect()...
	add.circle()...
	add.path()...
	add.use()...
	add.image()...
})

//パターン塗りの実行
var rect=draw.rect(100,100).attr({fill:pattern})

勿論strokeにも塗れます
var rect=draw.rect(100,100).attr({'fill':'#FFF','stroke':pattern,'stroke-width':2})

● patternTransform


patternTransformも可能です

//pattern追加メソッド
pattern.attr({'patternTransform':'rotate(30)'})

以下でも同じ結果
pattern.rotate(30)

● defs

defsに収容されたgraphic要素等は非表示になります。原則、画像、フォントを除きますが、収納は可能のようです。但し非表示には成らない。
使用する場合は use() で呼び出します。


var rect_defs=draw.defs().rect(100,25)

use(rect_defs).attr({'fill':'#000'})

● SAMPLE 4

パターンの大きさを「10x10」にした結果、この例では偶然に揃っているだけです。
(完全にそろえたりするには要素をdefsに収容すると多少扱い易くなるようです)、1,4,5番参照

1番、4番、patternTransformのrotate(30)設定で回転。正しく機能しています。


サンプルJS


	//パターンで塗る
	//対象エレメントID
	var draw=SVG('pattern-1a').size(160,160)

	//グラデ塗りパターン登録
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#FFD700')
  		stop.at(1,'#228B22')
	})
	//gradientの方向
	gradient.from(0,0).to(1,1)
	//パターンの大きさとあわせる
	var rect_defs=draw.defs().rect(10,10).attr({'fill':gradient})

	//rect
	var patn_rect=draw.rect(100,100).attr({'fill':'none','stroke':'#FFF','stroke-width':2}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})
	//pattern
	var pattern=draw.pattern(10,10,function(add) {
		//パターンを重ねる
  		add.use(rect_defs).attr({'fill':'#000'})
	})
	//pattern追加メソッド
	pattern.attr({'patternTransform':'rotate(30)'})

	//パターン塗りの実行
	patn_rect.attr({fill:pattern})

	var text=draw.text('1 グラデパターンで塗る').font({leading:0.8})

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

	//ラインパターンで塗る
	//対象エレメントID
	var draw=SVG('pattern-1b').size(160,160)

	//X図形10x10パターン登録
	//strokeのみ/defs()に連続して書いたほうが間違いが少ない
	var rect_defs=draw.defs().path('M 0 0 L 10 10 M 10 0 L 0 10 Z')

	//rect
	var rect=draw.rect(100,100).attr({'fill':'#BA55D3'}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})
	var patn_rect=draw.rect(100,100).attr({'fill':'none','stroke':'#FFF','stroke-width':2}).center(80,80)

	//pattern
	var pattern=draw.pattern(10,10,function(add) {
		//パターンを重ねる
  		add.use(rect_defs).attr({'fill':'none','stroke':'#ccc','stroke-width':1})//ライン
	})
	//パターン塗りの実行
	patn_rect.attr({fill:pattern})

	var text=draw.text('2 ラインパターンで塗る').font({leading:0.8})

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

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

	//10x10パターン登録保存パターンの使いまわし

	//X図形1
	//var str='M' + ' ' + 0 + ' ' + 0 + ' ' + 'L' + ' ' + 10 + ' ' + 10 + ' ' + 'M' + ' ' + 10 + ' ' + 0 + ' ' + 'L' + ' ' + 0 + ' ' + 10 + ' ' + 'Z'
	//X図形2
	//var str='M' + ' ' + 3 + ' ' + 3 + ' ' + 'L' + ' ' + 7 + ' ' + 7 + ' ' + 'M' + ' ' + 7 + ' ' + 3 + ' ' + 'L' + ' ' + 3 + ' ' + 7 + ' ' + 'Z'
	//点
	//var str='M' + ' ' + 4.5 + ' ' + 5 + ' ' + 'L' + ' ' + 5.5 + ' ' + 5 + ' ' + 'Z'
	//2x2角
	//var str='M' + ' ' + 4 + ' ' + 4 + ' ' + 'L' + ' ' + 6 + ' ' + 4 + ' ' + ' ' + 6 + ' ' + 6 + ' ' + ' ' + 4 + ' ' + 6 + ' ' + 'Z'
	//プラス形
	//var str='M' + ' ' + 4 + ' ' + 2 + ' ' + 'L' + ' ' + 6 + ' ' + 2 + ' ' + 6 + ' ' + 4 + ' ' + 8 + ' ' + 4 + ' ' + 8 + ' ' + 6 + ' ' + 6 + ' ' + 6 + ' ' + 6 + ' ' + 8 + ' ' + 4 + ' ' + 8 + ' ' + 4 + ' ' + 6 + ' ' + 2 + ' ' + 6 + ' ' + 2 + ' ' + 4 + ' ' + 4 + ' ' + 4 + ' ' + 4 + ' ' + 2 + ' ' + 'Z'
	//斜線
	var str='M' + ' ' + 0 + ' ' + 5 + ' ' + 'L' + ' ' + 5 + ' ' + 0 + ' ' + 'M' + ' ' + 0 + ' ' + 10 + ' ' + 'L' + ' ' + 0 + ' ' + 10 + ' ' + 'M' + ' ' + 5 + ' ' + 10 + ' ' + 'L' + ' ' + 10 + ' ' + 5 + ' ' + 'Z'

	//strokeのみ/defs()に連続して書いたほうが間違いが少ない
	var rect_defs=draw.defs().path(str)

	//rect
	var rect=draw.rect(100,100).radius(10).attr({'fill':'#FFFFFF'}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})
	var patn_rect=draw.rect(100,100).radius(10).attr({'fill':'none','stroke':'#00CED1','stroke-width':2}).center(80,80)
	//pattern
	var pattern=draw.pattern(10,10,function(add) {
		//パターンを重ねる
  		add.use(rect_defs).attr({'fill':'none','stroke':'#ccc','stroke-width':1})//ライン
	})
	//パターン塗りの実行
	patn_rect.attr({fill:pattern})

	var text=draw.text('3 ラインパターンで塗る').font({leading:0.8})


下記の様にも出来ますが、それぞれの性質、振る舞いを把握して描画すれば可能のようです。慣れが必要か、


サンプルJS


	//パターンで塗る
	//対象エレメントID
	var draw=SVG('pattern-1d').size(160,160)

	//グラデ塗りパターン登録
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#FFFFFF')
  		stop.at(1,'#000000')
	})
	//gradientの方向
	gradient.from(0,0).to(1,0)//標準
	//パターンの大きさとあわせる/defs2
	var rect_defs2=draw.defs().rect(20,100).attr({'fill':gradient})

	//rect
	var patn_rect=draw.rect(100,100).attr({'fill':'none'}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})
	//pattern
	var pattern=draw.pattern(20,100,function(add) {
		//パターンを重ねる
  		add.use(rect_defs2).attr({'fill':'#000'})
	})
	//pattern追加メソッド
	pattern.attr({'patternTransform':'rotate(30)'})

	//パターン塗りの実行
	patn_rect.attr({fill:pattern})

	var text=draw.text('4 グラデパターンで塗る').font({leading:0.8})

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

	//パターンで塗る
	//対象エレメントID
	var draw=SVG('pattern-1e').size(160,160)

	//グラデ塗りパターン登録
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#FF0000')
  		stop.at(1,'#000000')
	})
	//gradientの方向
	gradient.from(0,0).to(0,1) //上から下に
	//パターンの大きさとあわせる/defs3
	var rect_defs3=draw.defs().rect(100,25).attr({'fill':gradient})

	//rect
	var patn_rect=draw.rect(100,100).radius(10).attr({'fill':'none','stroke':'#FFF','stroke-width':2}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})
	//pattern
	var pattern=draw.pattern(100,25,function(add) {
		//パターンを重ねる
  		add.use(rect_defs3).attr({'fill':'#000'})
	})
	//pattern追加メソッド
	pattern.attr({'patternTransform':'rotate(30)'})

	//パターン塗りの実行
	patn_rect.attr({fill:pattern})

	var text=draw.text('5 グラデパターンで塗る').font({leading:0.8})

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

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

	//グループ化
	var group=draw.group()
	var image=group.image('/main/images/testImage104.jpg').size(160,160).center(80,80).scale(100/160)
	//gradient-circle1
	var rect=group.circle(100).attr({'fill':image}).center(80,80)

	//グラデデータ2
	var gradient2=group.gradient('radial',function(stop){
  		stop.at(0,'rgba(255,255,255,1)')
  		stop.at(0.25,'rgba(255,255,255,0)')
		stop.at(0.6,'rgba(0,0,0,0)')
		stop.at(1,'rgba(0,0,0,0.8)')
	})
	//gradientの方向2
	gradient2.from(0.25,0.25).to(0.5,0.5).radius(0.55)
	//gradient-circle2
	var rect=group.circle(100).attr({'fill':gradient2}).center(80,80)
	group.attr({'filter':'url(#dropShadow)'})

	var text=draw.text('6 画像グラデ塗り radial').font({leading:0.8})


 

その他

2、3、画像strokeもOKです。

パターンなど作るのは大変ですから、画像も上手く使いましょう。


サンプルJS


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

	var str='M' + ' ' + 3 + ' ' + 3 + ' ' + 'L' + ' ' + 7 + ' ' + 7 + ' ' + 'M' + ' ' + 7 + ' ' + 3 + ' ' + 'L' + ' ' + 3 + ' ' + 7 + ' ' + 'Z'
	var rect_defs=draw.defs().path(str)

	//グループ化
	var group=draw.group()
	var image=group.image('/main/images/grad_200.jpg').size(160,160).center(80,80).scale(200/160)
	var rect=group.rect(100,100).attr({'fill':image}).center(80,80)
	//pattern
	var pattern=group.pattern(10,10,function(add) {
		//パターンを重ねる
		add.use(rect_defs).attr({'fill':'none','stroke':'#ccc','stroke-width':1})
	})
	//パターン塗りの実行
	var rect_img=group.rect(100,100).radius(10).attr({fill:pattern}).center(80,80)

	group.attr({'filter':'url(#dropShadow2)'})

	var text=draw.text('7 画像塗りとパターン').font({leading:0.8})

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

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

	var image=draw.image('/main/images/testImage108.jpg').size(50,50)

	//pattern
	var pattern=draw.pattern(50,50,function(add) {
		//パターンを重ねる
  		add.rect(50,50).attr({'fill':image})
	})
	//パターン塗りの実行
	//rect
	var patn_rect=draw.rect(100,100).attr({'fill':'#FFF','stroke':pattern,'stroke-width':10}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

	var text=draw.text('8 画像パターン stroke').font({leading:0.8})

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

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

	//グラデ塗り
	var gradient=draw.gradient('linear',function(stop){
  		stop.at(0,'#000')
  		stop.at(1,'#F00')
	})
	//gradientの方向
	gradient.from(1,1).to(0,0) //右下から左上に

	//gradient-rect
	var rect=draw.rect(100,100).attr({'fill':'#FFF','stroke':gradient,'stroke-width':4}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

	var text=draw.text('9 gradient stroke').font({leading:0.8})


 

CSS

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


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

 


 

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

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

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

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

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

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


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

【参考】svg要素の基本的な使い方まとめ: 9.グラデーションとパターン


以上。

 


[ この記事のURL ]


タグ:SVG , javascript

 

ブログ記事一覧



[1]