POPSブログ

SVG.js filterとDropShadow

381

  Category:  javascript2016/02/27 pops 

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

 

SVG.js filterとDropShadowのテスト

 

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

zu

 

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


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

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

 

DEMO filterとDropShadowの「デモ」

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

Chromeでの閲覧を推奨します

DEMO、このページに収容できない、filterとDropShadowに関連する「デモ」です。

DEMO-040


 

SVG.js filterとDropShadow

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


手抜き目次

1. DropShadow
2. filter (画像フィルター、フィルターのアニメーション、画像フィルターとHOVERアクション、FILTER シミュレーション、feColorMatrix、TEXT)
3. 画像フィルターのデモ
4. サンプルJSの全表示

 

DropShadow

SVG.jsのDropShadowはエラーで機能しません。カスタムDropShadowは独自のもので、以下4個をdropshadow-custom.jsで設定している。

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


● カスタムDropShadowおさらい。


#dropShadow, #dropShadow2, #dropShadow3, #customBlur

カスタムDropShadowの場合のfilter削除は下記の様になる。SVG.jsの書式とは異なります。


自作カスタムDropShadow

陰影の実行
rect.attr({'filter':'url(#dropShadow)'})
削除する
rect.attr({'filter':'none'})

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

5番は削除が難しい
unfilter
The unfilter method removes the filter attribute from the node:
image.unfilter()
効かない

click()アクションで、カスタムDropShadowを設定した場合、セキュリティ上「IE11」で上手くかかりません。
このような設定は「一生に一度、無いと思います」が....、

ダミーanimateを実行して、コールバックを利用すれば、IE11を騙せる。animateは何もしていないと同じですが、コールバックがあるのはanimateだけですから...
アニメ時間、animate(0)はFirefox NG、最低1ミリ秒入れてください。animate(1) OK


IE用騙しアニメ、コールバックがあるとクリックが効く
test_btn1.click(shadow_rect)

//Func/toggleClass
function shadow_rect(){
	//ダミーanimate/コールバックがほしいだけ
	this.animate(1).rotate(0).after(function() {
		ds_rect.toggleClass('active')
		if(ds_rect.hasClass('active')) {
			ds_rect.attr({'filter':'url(#dropShadow)'})
		}else{
			ds_rect.attr({'filter':'none'})
		}
	})
}

● SAMPLE 1

#dropShadow, #dropShadow2, #dropShadow3の例、原則定格である


サンプルJS


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

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

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

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

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

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

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

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

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

	//SVG文字
	var shadow_text=draw.text('POPS')
	.font({
		family:'Arial'
		,'size':40
		,'font-weight':'bold'
		,anchor:'left'
		,leading:1
	})
	.attr({'fill':'#FF69B4'}).center(80,80)
	.attr({'filter':'url(#dropShadow3)'})

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


4番、下層に#customBlur / 5番は削除が難しい / 6番、2重構造、下層をボカス


サンプルJS


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

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

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

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

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

	//offsetのみ/エラーになるのでぼかせない
	.filter(function(add){
		var blur=add.offset(10,10).in(add.sourceAlpha)
		add.blend(add.source,blur)
		this.size('200%','200%').move('-50%','-50%')
	})

	var txt=draw.text('5 offset sourceAlpha').font({leading:0.8})
	//効かない
	//image.unfilter()

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

	var draw=SVG('graphics-4f').size(160,160)

	var shadow=draw.rect(100,100).attr({'fill':'#000','stroke':'rgba(0,0,0,0)','stroke-width':2}).center(85,85)
	.filter(function(add) {
		add.gaussianBlur(5)
		this.size('200%','200%').move('-50%','-50%')
	})
	var rect=draw.rect(100,100).attr({'fill':'#FFD700','stroke':'#FFF','stroke-width':2}).center(80,80)

	var txt=draw.text('6 blur-filter IE補正').font({leading:0.8})


7番、toggleClassは作りが違う / 8番、グループに陰影 / 9番、セットに陰影は特殊です


サンプルJS


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

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

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

	//Func/toggleClass
	function shadow_rect(){
		//ダミーanimate/コールバックがほしいだけ
		this.animate(1).rotate(0).after(function() {
			ds_rect.toggleClass('active')
			if(ds_rect.hasClass('active')) {
				ds_rect.attr({'filter':'url(#dropShadow)'})
			}else{
				ds_rect.attr({'filter':'none'})
			}
		})
	}

	var txt=draw.text('7 ボタン押 shadow on/off').font({leading:0.8})

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

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

	//グループ化
	var group=draw.group()
	var rect=group.rect(100,100).attr({'fill':'#FFD700','stroke':'#FFF','stroke-width':2}).center(80,80)
	var rect=group.rect(80,80).attr({'fill':'#DAA520','stroke':'#FFF','stroke-width':2}).center(100,80)
	group.attr({'filter':'url(#dropShadow2)'})

	var txt=draw.text('8 group-shadow').font({leading:0.8})

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

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

	var rect1=draw.rect(100,100).attr({fill:'#FFD700','stroke':'#FFF','stroke-width':2})
	var rect2=draw.rect(80,80).attr({fill:'#DAB400','stroke':'#FFF','stroke-width':2})
	var rect3=draw.rect(60,60).attr({fill:'#DAA520','stroke':'#FFF','stroke-width':2})

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

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


filter

SVG.jsのfilter処理には、プラグイン「svg.filter.js」が必要になります。


画像フィルター

画像フィルターの種類は次の様になります、尚サンプルは「デモページ」に掲載しますのでそちらを参照ください。
原理、詳細などは省略しますので、各自調べて学習ください。


画像フィルター処理した画像にはHOVER CLICK等のアクションが効かない場合があります。グループでラップすれば有効に処理できます。「画像フィルターとHOVERアクション」参照。



gaussian blur / ガウスぼかし
horizontal blur / 水平方向のぼかし
desaturate / 彩度を減じます
contrast / コントラスト
sepiatone / セピア調
hue rotate 180 / 色相は180を回転させます
luminance to alpha / アルファの輝度
colorize / カラー化します
posterize / ポスタライズ
darken / 暗くします
lighten / 明るくします
invert / 反転
gamma correct 1 / ガンマ1
gamma correct 2 / ガンマ2
drop shadow / 影を落とす
----------------------
extrude / 押し出します、デモでは削除しています

● SVG.jsフィルターとfilter削除は下記の様になる。svg.filter.js参照。


フィルターの実行
image.filter(function(add){
	//定形の書式
})

削除する
image.unfilter()

フィルターのアニメーション

画像フィルター posterize, desaturate は使用頻度が高いと思われるので、アニメーションの方法が掲示されていますので簡単に作成できます。
その他は、結構難しいが、colorize, horizontal blur はduring()アニメーションで作成できました。(サンプル7,8番)


● SAMPLE 2

1 画像フィルターposterize / 2 posterize ON/OFF / 3 hue rotate アニメ OK


サンプルJS


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

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//posterize
	image.filter(function(add) {
		add.componentTransfer({
			rgb:{type:'discrete',tableValues:[0,0.2,0.4,0.6,0.8,1]}
		})
	})

	var txt=draw.text('1 画像フィルターposterize').font({leading:0.8})

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

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

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

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

	//Func/toggleClass
	function show_posterize(){
		post_image.toggleClass('active')
		if(post_image.hasClass('active')) {
			//posterize
			post_image.filter(function(add) {
				add.componentTransfer({
					rgb:{type:'discrete',tableValues:[0,0.2,0.4,0.6,0.8,1]}
				})
			})
		}else{
			post_image.unfilter()
		}
	}

	var txt=draw.text('2 posterize on/off').font({leading:0.8})

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

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

	var hueRotate
	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//hue rotate 0
	image.filter(function(add){
		hueRotate=add.colorMatrix('hueRotate',0)
	})

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

	function animate_hue(){
		hueRotate.animate(4000).attr('values',360).after(function(){
			this.attr('values',0)
		})
	}

	var txt=draw.text('3 hue rotate アニメ0-360').font({leading:0.8})


4 desaturateアニメ OK / 5 colorizeアニメならず NG / 6 blurアニメならず NG


サンプルJS


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

	var desaturate
	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//白黒desaturate
	image.filter(function(add){
		desaturate=add.colorMatrix('saturate',1)
	})

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

	function animate_desaturate(){
		desaturate.animate(2000).attr('values',0).after(function(){
			this.animate(2000).attr('values',1)
		})
	}

	var txt=draw.text('4 desaturateアニメ 0-1-0').font({leading:0.8})

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

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

	var c_matrix
	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//colorize
	image.filter(function(add) {
		c_matrix=add.colorMatrix('matrix',[1.0,0,0,0,0, 0,1.0,0,0,0, 0,0,1.0,0,0, 0,0,0,1.0,0])
	})

	//ボタン
	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(animate_colorMatrix)

	function animate_colorMatrix(){

		//色はかわるがアニメならず
		c_matrix.animate(1000).attr('values',[0,0,0,0,0, 0,1.0,0,0,0, 0,0,1.0,0,0, 0,0,0,1.0,0]).after(function(){
			this.animate(1000).attr('values',[1.0,0,0,0,0, 0,1.0,0,0,0, 0,0,1.0,0,0, 0,0,0,1.0,0])
		})
	}

	var txt=draw.text('5 colorizeアニメならず').font({leading:0.8})

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

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

	var gaussianblur
	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//blur
	image.filter(function(add) {
		gaussianblur=add.gaussianBlur(0,0)
		this.size('200%','200%').move('-50%','-50%')
	})

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

	function animate_blur(){
		//機能するがアニメならず
		gaussianblur.animate(1000).attr('stdDeviation','15,0').after(function(){
			gaussianblur.animate(1000).attr('stdDeviation','0,0')
		})
	}

	var txt=draw.text('6  blurアニメならず').font({leading:0.8})


7 colorize during()アニメ OK / 8 blur during()アニメOK / 9 blur Timerで処理


サンプルJS


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

	var c_matrix2
	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//colorize
	image.filter(function(add) {
		c_matrix2=add.colorMatrix('matrix',[1,0,0,0,0, 0,1,0,0,0, 0,0,1,0,0, 0,0,0,1,0])
	})

	var colorize=1,from=1,to=0

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

	function animate_colorMatrix2(){

		c_matrix2.animate(2000).during(function(pos){
			colorize=1-pos//1から0
			c_matrix2.attr('values',[colorize,0,0,0,0, 0,1,0,0,0, 0,0,1,0,0, 0,0,0,1,0])
		})
		.after(function(){
			this.animate(1,'',1000).attr('values',[1,0,0,0,0, 0,1,0,0,0, 0,0,1,0,0, 0,0,0,1,0])
		})

	}

	var txt=draw.text('7 during() colorize アニメOK').font({leading:0.8})

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

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

	var gaussianblur2
	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//blur
	image.filter(function(add) {
		gaussianblur2=add.gaussianBlur(0,0)
		this.size('200%','200%').move('-50%','-50%')
	})

	var stddeviation,from=0,to=15

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

	function animate_blur2(){
		//アニメOK
		gaussianblur2.animate(1000).during(function(pos){
			stddeviation=from+(to-from)*pos
			var blurstr=stddeviation + ',' + 0 + ''
			gaussianblur2.attr('stdDeviation',blurstr)
		})
		.after(function(){
			this.animate(1,'',2000).attr('stdDeviation','0,0')
		})
	}

	var txt=draw.text('8 during() blur アニメOK').font({leading:0.8})

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

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

	var gaussian_Blur
	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//blur
	image.filter(function(add) {
		gaussian_Blur=add.gaussianBlur(0,0)
		this.size('200%','200%').move('-50%','-50%')
	})

	var timerID,maxBlur=15,count=0

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

	function interval_blur(){
		count=0
		timerID=setInterval(set_blur,50)
	}

	function set_blur(){
		//10回
		if(count>10){clearInterval(timerID)}
		var blur_v=maxBlur*count/10
		var blurstr=blur_v + ',' + 0 + ''
		gaussian_Blur.attr('stdDeviation',blurstr)
		count +=1
	}

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


画像フィルターとHOVERアクション、CLICKアクション

画像フィルター処理した画像には、HOVERアクションが効きません。それ以外にも影響は及びそうです。グループでラップしてグループにHOVERアクション処理をします。グループに陰影処理するとHOVERアクションが効きません。結構手間隙が掛かります。

CLICKアクションでも同様の場合があるので、構造をかえての対応が必要です。


1. グループでラップしてグループにHOVERアクション処理(推奨)
2. グループの中に陰影用のRECTを入れて、HOVERアクション処理を邪魔しない。
3. アクション専用のレクト層を上に重ねて影響がでないよう工夫する。
4. 画像フィルター処理した画像を角丸に画像塗りは出来ない。(基本的に塗りは止める)
角丸レクトに画像塗り処理後、レクトにフィルター処理は出来る、サンプル11番参照
5. 問題があれば構造を変えて対応する。(ナヤメ)
6. IE11で画像フィルター処理した画像塗りは出来ない。RECTが生成されない。

nayameハーイ「苦悶式」のナヤメちゃんです。ダンダン「悶絶式」に変わり最後には「イッチャウ」


HOVER ACTION

10番はグループ構造でOK。11番はグループ構造画像塗り、レクトにフィルター処理と発想を変えて対応した。12番はフィルター処理した画像の上層にレクトを配置している。アニメで変化させている。
結果的に10番12番の構造にすべきであるが、マスク方式でもフィルター処理した画像はNG。


一番、白黒フィルターが使用すると予想されるが、作るのが大変です。将来的に不具合は直ることと思いますが...

サンプルJS


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

	var txthover=draw.text('10 HOVER 白黒切り替え OK').font({leading:0.8})

	var desaturate_hover

	//groupにHOVERアクションを設定
	var hover_group=draw.group()
	//groupに陰影は問題があるので
	var rect=hover_group.rect(100,100).attr({'fill':'#000'}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

	//image 100x100
	var hover_image1=hover_group.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//白黒desaturate
	.filter(function(add){
		desaturate_hover=add.colorMatrix('saturate',0)
	})
	//groupに陰影
	hover_group.style('cursor','pointer')

	//HOVER-HOVEROUT
	hover_group.mouseover(function(){
		txthover.text('hover')
  		desaturate_hover.attr('values',1)
	})
	hover_group.mouseout(function(){
		txthover.text('hoverout')
  		desaturate_hover.attr('values',0)
	})

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

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

	var desaturate_hover2

	//groupにHOVERアクションを設定
	var hover_group2=draw.group()
	//バック用
	var back_rect2=hover_group2.rect(100,100).radius(10).attr({'fill':'#000'}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

	//image 100x100
	var image=hover_group2.image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(100/160)
	//画像塗り用
	var image_rect2=hover_group2.rect(100,100).radius(10).attr({'fill':image}).center(80,80)
	//rectに白黒desaturate
	.filter(function(add){
		desaturate_hover2=add.colorMatrix('saturate',0)
	})

	//アクション用
	var hover_rect2=hover_group2.rect(100,100).radius(10).attr({'fill':'rgba(0,0,0,0.01)','stroke':'#FFF','stroke-width':2}).center(80,80)
	.style('cursor','pointer')

	hover_group2.mouseover(function(){
  		desaturate_hover2.attr('values',1)
	})
	hover_group2.mouseout(function(){
  		desaturate_hover2.attr('values',0)
	})

	var txt=draw.text('11 画像塗 HOVER').font({leading:0.8})

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

	//HOVERアニメに変更する
	//エレメントID
	var draw=SVG('graphics-5l').size(160,160)

	var desaturate_hover3
	var hover_image3=draw.image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(100/160)
	//白黒desaturate
	.filter(function(add){
		desaturate_hover3=add.colorMatrix('saturate',0)
	})
	var hover_rect3=draw.rect(100,100).attr({'fill':'rgba(0,0,0,0.01)','stroke':'#FFF','stroke-width':2}).center(80,80)
	.style('cursor','pointer')
	.attr({'filter':'url(#dropShadow2)'})

	hover_rect3.mouseover(function(){
  		desaturate_hover3.animate(1000).attr('values',1)
	})
	hover_rect3.mouseout(function(){
  		desaturate_hover3.animate(1000).attr('values',0)
	})

	var txt=draw.text('12 画像の上にレクト配置').font({leading:0.8})


[画像塗り参考]

11番、カスタムフィルター(ColorMatrix greyscale)の例JS

カスタムフィルター ColorMatrix greyscale を使用。


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

	var desaturate_hover2

	//groupにHOVERアクションを設定
	var hover_group2=draw.group()
	//バック用
	var back_rect2=hover_group2.rect(100,100).radius(10).attr({'fill':'#000'}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})

	//image 100x100
	var image=hover_group2.image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(100/160)
	//画像塗り用
	var image_rect2=hover_group2.rect(100,100).radius(10).attr({'fill':image}).center(80,80)
	//rectに白黒desaturate
	.filter(function(add){
		desaturate_hover2=add.colorMatrix('matrix',[.33,.33,.33,0,0, .33,.33,.33,0,0, .33,.33,.33,0,0, 0,0,0,1,0])
	})

	//アクション用
	var hover_rect2=hover_group2.rect(100,100).radius(10).attr({'fill':'rgba(0,0,0,0.01)','stroke':'#FFF','stroke-width':2}).center(80,80)
	.style('cursor','pointer')

	hover_group2.mouseover(function(){
  		desaturate_hover2.attr('values',[1,0,0,0,0, 0,1,0,0,0, 0,0,1,0,0, 0,0,0,1,0])
	})
	hover_group2.mouseout(function(){
  		desaturate_hover2.attr('values',[.33,.33,.33,0,0, .33,.33,.33,0,0, .33,.33,.33,0,0, 0,0,0,1,0])
	})

	var txt=draw.text('11 画像塗 HOVER').font({leading:0.8})

11番、画像フィルターはNGの例JS

画像に直接フィルターはアクションおよび画像処理がNGに成ります。これは使用できません。


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

	var desaturate_hover2

	//groupにHOVERアクションを設定
	var hover_group2=draw.group()
	//image 100x100
	var image=hover_group2.image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(100/160)
	//白黒desaturate
	.filter(function(add){
		desaturate_hover2=add.colorMatrix('saturate',0)
	})

	var hover_rect2=hover_group2.rect(100,100).radius(10).attr({'fill':image,'stroke':'#FFF','stroke-width':2}).center(80,80)
	.style('cursor','pointer')
	.attr({'filter':'url(#dropShadow2)'})

	hover_group2.mouseover(function(){
  		desaturate_hover2.attr('values',1)
	})
	hover_group2.mouseout(function(){
  		desaturate_hover2.attr('values',0)
	})

	var txt=draw.text('11 画像塗 HOVER IE NG').font({leading:0.8})


CLICK ACTION

簡単な構造でクリックテストをします。この構造ではOKのようです。陰影をつけると画像フィルターが壊れるのでグループ化しました。strokeを付けるなら、上層に別途作らねばなりません。HOVERアクションを追加すればまた違ってきます。「苦悶式」です。

1番画像直接アクション設定 / 2,3番レクトに画像塗り


問題が起きたら自己解決ください。救急車はきません。

サンプルJS


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

	var show_text=draw.text('----------').font({leading:0.8}).move(20,140)

	//画像とfilter処理
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	image.filter(function(add){
		add.colorMatrix('hueRotate',60)
	})

	//click-action
	image.style('cursor','pointer')
	image.click(function(){
		show_text.text('')
		//ランダムカラー
		var color='#'+Math.random().toString(16).slice(-6)
		show_text.text('// CLICK OK').attr({'fill':color})
	})

	var txt=draw.text('1 CLICK-TEST 画像直接').font({leading:0.8})

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

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

	var show_text2=draw.text('----------').font({leading:0.8}).move(20,140)

	//画像とfilter処理
	var image=draw.image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(100/160)
	var ck_rect=draw.rect(100,100).attr({'fill':image}).center(80,80)
	ck_rect.filter(function(add){
		add.colorMatrix('hueRotate',180)
	})

	//click-action
	ck_rect.style('cursor','pointer')
	ck_rect.click(function(){
		show_text2.text('')
		//ランダムカラー
		var color='#'+Math.random().toString(16).slice(-6)
		show_text2.text('// CLICK OK').attr({'fill':color})
	})

	var txt=draw.text('2 CLICK-TEST 画像塗り').font({leading:0.8})

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

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

	var show_text3=draw.text('----------').font({leading:0.8}).move(20,140)

	//dropShadowのためグループ化
	var group=draw.group()
	//画像とfilter処理
	var image=group.image('/main/images/testImage108.jpg').size(160,160).center(80,80).scale(100/160)
	var ck_rect3=group.rect(100,100).attr({'fill':image}).center(80,80)
	ck_rect3.filter(function(add){
		add.colorMatrix('hueRotate',270)
	})
	group.attr({'filter':'url(#dropShadow2)'})

	//click-action
	ck_rect3.style('cursor','pointer')
	ck_rect3.click(function(){
		show_text3.text('')
		//ランダムカラー
		var color='#'+Math.random().toString(16).slice(-6)
		show_text3.text('// CLICK OK').attr({'fill':color})
	})

	var txt=draw.text('3 CLICK-TEST 画像塗陰影').font({leading:0.8})


 

FILTER シミュレーション

以下の2種類のみ状態をシミュレーションしてみます。


● hue rotate、値を、0-360、変化させます。「赤ボタン」をドラッグください。


● colorize、RGBの値を、1-0、変化させます。[R,0,0,0,0, 0,G,0,0,0, 0,0,B,0,0, 0,0,0,1,0]
全てを変更するのは大変なので、3つのみ変化させてみます。余り意味ないかな.....


 

feColorMatrix

上の、colorizeでも使用されているColorMatrixで有る。SVG.jsではadd.colorMatrix()処理である。
feColorMatrix変化、ColorMatrixは判り難いが、多少の操作で次の様に成る。3番はフィルターinvertと同等である。

色々操作すれば、カスタムフィルターが出来るが、原理がチト難しい。下記全てパクリである。



サンプルJS


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

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//matrix-sepia
	image.filter(function(add) {
		add.colorMatrix('matrix',[.35,.35,.35,0,0, .25,.25,.25,0,0, .15,.15,.15,0,0, 0,0,0,1.0,0])

	})

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

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

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

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//matrix-greyscale
	image.filter(function(add) {
		add.colorMatrix('matrix',[.33,.33,.33,0,0, .33,.33,.33,0,0, .33,.33,.33,0,0, 0,0,0,1,0])
	})

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

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

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

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//matrixカラー反転
	image.filter(function(add) {
		add.colorMatrix('matrix',[-1,0,0,0,1, 0,-1,0,0,1, 0,0,-1,0,1, 0,0,0,1,0])
	})

	var txt=draw.text('3 ColorMatrix カラー反転').font({leading:0.8})


グレースケール系でも少し雰囲気が違う。差し詰めカスタムフィルターと言う事か。(パクリフィルターが正解)



サンプルJS


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

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//matrix-monochrome
	image.filter(function(add) {
		add.colorMatrix('matrix',[1,0,0,0,0, .8,0,0,0,0, .65,0,0,0,0, 0,0,0,1,0])
	})

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

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

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

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//matrix-black
	image.filter(function(add) {
		add.colorMatrix('matrix',[.95,0,0,0,.05, .85,0,0,0,.15, .5,0,0,0,.5, 0,0,0,1,0])
	})

	var txt=draw.text('5 ColorMatrix black').font({leading:0.8})

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

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

	//image 100x100
	var image=draw.image('/main/images/testImage108.jpg').size(100,100).move(30,30)
	//matrix-DuoTone Colorizing
	image.filter(function(add) {
		add.colorMatrix('matrix',[.95,0,0,0,.05, .65,0,0,0,.15, .15,0,0,0,.5, 0,0,0,1,0])
	})

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


 

上記、ColorMatrixに関する資料は下記サイトに詳しい。


feColorMatrix
https://docs.webplatform.org/wiki/svg/elements/feColorMatrix

Color Filters Can Turn Your Gray Skies Blue
https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/

SVG Color Matrix
http://sssagi.net/matrix

TEXT

TEXT画像塗り、画像にフィルターを掛けます。通常と少し違いますが、そこそこいけます。
画像の雰囲気を少し変えられますが画像の配色加減で変わりますので、テキトウなものです。
問題があれば自己解決ください。

カーニング無しの通常処理は画像塗りOK。colorizeフィルターFirefox問題なし。


サンプルJS


	//colorizeフィルター
	//エレメントID
	var draw=SVG('svgtext-fliter-1a').size(640,100)

	//画像640x100
	var image=draw.image('/main/images/textback13.png').size(640,100)
	//colorize
	image.filter(function(add) {
		add.colorMatrix('matrix',[1.0,0,0,0,0
			, 0,0.2,0,0,0
			, 0,0,0.2,0,0
			, 0,0,0,1.0,0])
	})

	//グループ設定
	var logo_group1=draw.group()
	//文字描画
	var text1=logo_group1.text('POPSWEB KOUBOU')
	.font({
		family:'Arial'
		,size:50
		,'font-weight':'bolder'
		,anchor:'left'
		,leading:1
	})

	//画像塗り/move暫定値で配置
	text1.attr({fill:image,'stroke':'#FFFFFF','stroke-width':1}).move(70,25)

	//グループ陰影ドラッグ
	logo_group1.attr({'filter':'url(#dropShadow)'})
	logo_group1.style('cursor','default').draggable()


	var txt=draw.text('1 画像塗りGroup化drag').font({leading:0.8})


カーニングと画像塗りOKだが、Firefoxでのフィルターが掛からない。Firefoxエラーにはならないが処理位置での反応が無い。
Firefoxは下にある「塗り画像 640x100」と同じ色で有る。


サンプルJS


	//TEXT-フィルター2
	//エレメントID
	var draw=SVG('svgtext-fliter-1b').size(640,100)

	//ストリング
	var main_strings="Merry Christmas 2016.dazo"

	//空文字
	var k_text=draw.text('')
	.font({
		family:'Times New Roman'
		,size:65
		,'font-weight':'bolder'
		,anchor:'left'
		,leading:1
	})

	//カーニングと画像塗り
	var spikes=main_strings.length
	k_text.text(function(add) {
		for (var i=0; i<spikes;i++){

			//画像640x100
			//ここでフィルターはダメ
			var text_image=draw.image('/main/images/textback13.png').size(640,100)

			//画像塗り
			var tx=main_strings.charAt(i)
			add.tspan(tx).attr({'dx':-10,'fill':text_image,'stroke':'#FFF','stroke-width':1})
			.filter(function(add){
				add.colorMatrix('hueRotate',90)
			})

		}
	})

	//move位置移動
	k_text.move(50,15)
	.attr({'filter':'url(#dropShadow)'})

	var txt=draw.text('2 カーニングと画像塗り move位置移動').font({leading:0.8})


カーニングの場合はループの中で画像塗りを実行する。フィルターは所定の位置でする事。Firefoxは認識していないのでダメ。バグはどうかは不明。


//画像640x100
//ここでフィルターはダメ
var text_image=draw.image('/main/images/textback13.png').size(640,100)

どちらも変わりない
//画像塗り
var tx=main_strings.charAt(i)
var addtext=add.tspan(tx).attr({'dx':-10,'fill':text_image,'stroke':'#FFF','stroke-width':1})
addtext.filter(function(add){
	add.colorMatrix('hueRotate',90)
})
---------------------------------------------------
//画像塗り
var tx=main_strings.charAt(i)
add.tspan(tx).attr({'dx':-10,'fill':text_image,'stroke':'#FFF','stroke-width':1})
.filter(function(add){
	add.colorMatrix('hueRotate',90)
})

● Firefoxのためにグループ化して構造をかえる。tspanを認識しないのでText全体にフィルター処理をする。これに陰影処理すると壊れるので、グループに陰影処理。
Firefoxで、下の「画像」と色が違っているのが確認できます。


Firefox修正、サンプルJS


	//TEXT-フィルター3/Firefox修正
	//エレメントID
	var draw=SVG('svgtext-fliter-1c').size(640,100)

	//ストリング
	var main_strings2="Merry Christmas 2016.dazo"

	//グループ化
	var group_ft=draw.group()

	//空文字
	var k_text2=group_ft.text('')
	.font({
		family:'Times New Roman'
		,size:65
		,'font-weight':'bolder'
		,anchor:'left'
		,leading:1
	})

	//カーニングと画像塗り
	var spikes=main_strings2.length
	k_text2.text(function(add) {
		for (var i=0; i<spikes;i++){

			//画像塗りのみ/フィルターは全体で処理
			var text_image=group_ft.image('/main/images/textback13.png').size(640,100)
			var tx=main_strings2.charAt(i)
			add.tspan(tx).attr({'dx':-10,'fill':text_image,'stroke':'#FFF','stroke-width':1})

		}
	})

	//move位置移動/hueRotateフィルター
	k_text2.move(50,15)
	.filter(function(add){
		add.colorMatrix('hueRotate',90)
	})
	//グループに陰影
	group_ft.attr({'filter':'url(#dropShadow)'})

	var txt=draw.text('3 カーニングと画像塗り Firefox修正').font({leading:0.8})


 

塗り画像 640x100 総天然色

hoisa

 

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-sample8.js

 


 

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

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

【参照】当方の記事: SVG.js Use,Symbol,Setとその他のメソッド

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

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

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

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

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


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

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


「苦悶式」です。以上、お大事に。

 


[ この記事のURL ]


タグ:javascript , SVG

 

ブログ記事一覧

年別アーカイブ一覧



[1]