POPSブログ

SVG.js DropShadowの自作とBlur

374

  Category:  javascript2016/01/22 pops 

SVG.js を使用してみましたが、使用法の解説サンプルなども現在皆無に近く、全て手探りで使用法、問題点などを洗い出してみます。svg.filter.jsがバージョンアップ(v2.0.2)しましたので、DropShadowが使えるようになりました。よって記事の一部を修正します。

 

SVG.js DropShadowの自作とBlurテスト


SVGの特徴として事前に作ったfilterなどを、url(#...)でアクセスすれば再利用できます。これで以前は「DropShadowを自作」して利用していましたが、svg.filter.jsがバージョンアップ(v2.0.2)後、DropShadowが正常に作れますので、今は必ずとも必要とはしません。よって興味のある方のみお読みください。2016/09/21


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


kageda

 

簡単な説明


SVG.js DropShadowの自作とBlurの説明


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

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

filterプラグイン svg.filter.jsフィルター処理用のJSです。現在バージョンアップ(v2.0.2)

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

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


このページでは、version 2.2.5、BUILT:Mon Jan 11現在のsvg.jsを使用しています。
svg.filter.jsは当方の都合でsvg.filter.v2.jsと名前を変えて使用しています。


新しいsvg.filter.jsのdropshadowとurl(#)の利用


1. 新しいsvg.filter.jsで色々なdropshadowを作れます。
(その都度、処理関数を書かねばならないし、同じものでも違うIDのフィルターとして生成される)
2. 但し、url(#)の利用で簡単効率的にdropshadowを処理できるので、前の自作dropshadowも残します。
(定形のものならば、こちらが簡単に設定できる)
3. jQueryバージョン違いで、2種のJSを作っていましたが、SVG.js形式での作り方に改めます(1つのJS)。

 

新しいsvg.filter.jsのdropshadow

サンプルを3種表示して置きます。詳細は下記記事を参照ください。

【参照】当方の記事: SVG.js プラグインsvg.filter.jsバージョンアップでDropShadowを処理


1番、黒dropshadow / 2番、色指定dropshadow / 3番、ソースのdropshadow


サンプルJS


	//対象エレメントID
	var draw=SVG('svg-test-shadow01').size(160,160)

	var text=draw.text('黒dropshadow').font({leading:0.8})

	var rect=draw.rect(100,100).radius(10).attr({'fill':'#FFD700','stroke':'#FFF','stroke-width':2}).center(80,80)
	.draggable()//ドラッグ
	.filter(function(add){
		//黒DropShadow
		var shadow=add.offset(5,5).in(add.sourceAlpha).gaussianBlur(3)
		add.merge(shadow,add.source)

		//blend処理ならば
		//add.blend(add.source,shadow)

		this.attr({'x':'-100%','y':'-100%','width':'400%','height':'400%'})//IE OK
	})

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

	//対象エレメントID
	var draw=SVG('svg-test-shadow02').size(160,160)

	var text=draw.text('色指定dropshadow').font({leading:0.8})

	var rect=draw.rect(100,100).radius(10).attr({'fill':'#FFD700','stroke':'#FFF','stroke-width':2}).center(80,80)
	.draggable()//ドラッグ
	.filter(function(add){
		//色指定DropShadow
		var shadow=add.flood('#00F',1).composite(add.sourceAlpha,'in').offset(5,5).gaussianBlur(2)
		add.merge(shadow,add.source)

		this.attr({'x':'-100%','y':'-100%','width':'400%','height':'400%'})//IE OK
	})

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

	//対象エレメントID
	var draw=SVG('svg-test-shadow03').size(160,160)

	var text=draw.text('ソースのdropshadow').font({leading:0.8})

	//var rect=draw.rect(100,100).radius(10).attr({'fill':'#FFD700','stroke':'#FFF','stroke-width':2}).center(80,80)
	var image=draw.image('/main/images/testImage102.jpg').size(100,100).center(80,80)
	.draggable()//ドラッグ
	.filter(function(add){
		//ソースのDropShadow
		var shadow=add.offset(10,10).in(add.source).gaussianBlur(3)
		add.merge(shadow,add.source)

		this.attr({'x':'-100%','y':'-100%','width':'400%','height':'400%'})//IE OK
	})


url(#)を利用したdropshadow

ページの何処かに、フィルターなど実行または保存してあれば、url(#)で再利用出来るのがSVGの特徴です。

頻繁に利用する定格のdropshadowをdefsにsvg()で記述するだけですが、SVG.js形式で書いていますので、svg.js読み込み後に実行します。
以前のjQueryのものと内容は同じですが、注意点として完全に問題なく動作するかなどまだ保障できません。テスト的に利用して問題はまだ出てはいませんのでおそらく大丈夫と思う。(SVG.jsは自動でID 名など生成しますので、同じ名前のものが付与される可能性がある)。もし問題があればjQuery形式を利用ください。


1. 通常使用するdropshadowは好みはありますが数種類位です。とにかく設定が楽。
(特別なdropshadowは別途filter処理関数でつくればよい)
2. ループで沢山の要素にdropshadowする場合に効率的です。
3. 特別なdropshadowは何時でも作れますので、使い分ければ便利です。
4. dropshadowの形態と登録は、ID名、拡張範囲の設定などは自由です。
5. 範囲拡張の方法が2種ありますので、状況によりいずれかを利用します。
6. url(#)を利用する方法は別にもありますが、この方法が一番簡単です。


DropShadowの構造(原型)

下は通常のDropShadowを施したインラインのSVGです。このfilterを利用してDropShadowを自作します。
カスタムDropShadowはfilter部分のIDおよび属性を変更してdefsの中に収容しているだけです。



<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <filter id="dropShadowX" widh="200" height="200">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
    <feOffset dx="2" dy="4" />
    <feMerge>
        <feMergeNode /><feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
  <circle cx="60" cy="60" r="50" fill="green"
          filter="url(#dropShadowX)" />
</svg>

SVG.jsで書いた、svg-dropshadow.jsの使用例

使用時に内容の変更は、原則できません。登録時の条件で使用する事になります。


● カスタムDropShadow
事前にjsを読み込み、それぞれのIDにアクセスするだけです。
現在、#dropShadow、#dropShadow2、#dropShadow3、があります。変更追加などは自由です。



var rect=draw.rect()..........
.attr({'filter':'url(#dropShadow)'})//カスタムDropShadow

通常これだけで充分と思います。


DropShadow SAMPLE、sample-0a, sample-0b, sample-0c、ドラッグ設定なし。


サンプルJS


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

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

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

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

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

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

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

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

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

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

	var image=draw.image('/main/images/testImage102.jpg').size(100,100).center(80,80)
	.attr({'filter':'url(#customBlur)'})//ぼかし


 

単に、filterを記述するだけです。詳細は下記ページ下段の記事「従来の読み込みDropShadowをSVG.jsで作る」を参照ください。詳しく書いています。

【参照】当方の記事: SVG.js プラグインsvg.filter.jsバージョンアップでDropShadowを処理


svg-dropshadow.jsの書き方例


//SVG.js用
//svg-dropshadow.js
(function(window) {

	function svgShadowSet() {

		//DIV-BOX/大きさ0
		var divElm=document.createElement("div")
		divElm.setAttribute("id","svg-dropshadow-box")
		divElm.setAttribute("width",0)
		divElm.setAttribute("height",0)
		//append-body
		document.body.appendChild(divElm)

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

		//SVG.jsコード
		var draw=SVG('svg-dropshadow-box').size(0,0)//0 問題あれば1
		draw.style({'opacity':0,'overflow':'hidden'})//非表示

		//defs
		var defs=draw.defs()

		//filterを記述設定する
		defs.svg('<filter id="dropShadow">......</filter>')






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

		//idを強制修正/競合防止
		defs.attr({'id':'svg-dorpshadow-defs'})
		draw.attr({'id':'svg-dorpshadow-stage'})

	}

	//meta記載の場合
	window.addEventListener("load", function loadHandler(evt) {
		removeEventListener("load",loadHandler);
		svgShadowSet();
	});

	//body記載の場合
	//onload=svgShadowSet();

})(window);

現在当方で使用しているJSです。このページでもこれを使用しています。ID名JS名などは自由です。

● svg-dropshadow.jsの全表示 svg-dropshadow.js Chromeは文字化けしますのでエンコード(UTF8)してご覧ください。

 


 

参考、jQueryで作る場合

以前使用していたものです。使用できないものでは有りません。


jQueryを利用したdropshadow

jQueryを利用しての記述です。半年位、使用していますが問題は無い。バージョン違いがあるので少しメンドウなだけです。

jQuery1.9以下でstdDeviation属性が変に書き込まれるため、上書きして正常に修正しているだけです。


jQuery1.9または以上なら (dropshadow-custom.js)

dropshadow-custom.js

注意、jQuery1.9または以上なら「UserAgent IE判定」部分は不要です。DIVラップは無くとも動作します。


//dropshadow-custom.js
//jQuery/svg.js用/IE判定なし
//切れ防止用drop-shadow2追加/2016/07/20

(function($){

  $(function(){

	//ID/dropShadow
	$('body').append('<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="dropShadow" filterUnits="userSpaceOnUse" x="0" y="0" width="1000" 

height="400"><feGaussianBlur in="SourceAlpha" stdDeviation="3" /><feOffset dx="2" dy="2" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" 

/></feMerge></filter></svg>');
	//ID/dropShadow2
	$('body').append('<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="dropShadow2" filterUnits="userSpaceOnUse" x="0" y="0" width="1000" 

height="400"><feGaussianBlur in="SourceAlpha" stdDeviation="3" /><feOffset dx="0" dy="0" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" 

/></feMerge></filter></svg>');
	//ID/dropShadow3テキスト用
	$('body').append('<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="dropShadow3" filterUnits="userSpaceOnUse" x="0" y="0" width="1000" 

height="400"><feGaussianBlur in="SourceAlpha" stdDeviation="1" /><feOffset dx="0" dy="1" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" 

/></feMerge></filter></svg>');
	//ID/customBlur
	$('body').append('<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="customBlur" filterUnits="userSpaceOnUse" x="0" y="0" width="1000" 

height="400"><feGaussianBlur stdDeviation="3" /></filter></svg></div>');

	//切れ防止用
	//ID/drop-shadow2
	$('body').append('<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="drop-shadow2" x="-100%" y="-100%" width="400%" 

height="400%"><feGaussianBlur in="SourceAlpha" stdDeviation="3" /><feOffset dx="0" dy="0" /><feMerge><feMergeNode /><feMergeNode 

in="SourceGraphic" /></feMerge></filter></svg>');

  });

})(jQuery);


jQuery1.9以下なら (dropshadow-custom-ie.js)

dropshadow-custom-ie.js

注意、このページは jQuery1.6.4 のためIE判定をして一部修正しています。jQuery1.9または以上なら「UserAgent IE判定」部分は不要です。


//dropshadow-custom-ie.js
//jQuery/svg.js用
//切れ防止用drop-shadow2追加/2016/07/20

(function($){

  $(function(){

	//ID/dropShadow
	$('body').append('<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="dropShadow" filterUnits="userSpaceOnUse" x="0" y="0" width="1000" 

height="400"><feGaussianBlur in="SourceAlpha" stdDeviation="3" /><feOffset dx="2" dy="2" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" 

/></feMerge></filter></svg>');
	//ID/dropShadow2
	$('body').append('<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="dropShadow2" filterUnits="userSpaceOnUse" x="0" y="0" width="1000" 

height="400"><feGaussianBlur in="SourceAlpha" stdDeviation="3" /><feOffset dx="0" dy="0" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" 

/></feMerge></filter></svg>');
	//ID/dropShadow3テキスト用
	$('body').append('<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="dropShadow3" filterUnits="userSpaceOnUse" x="0" y="0" width="1000" 

height="400"><feGaussianBlur in="SourceAlpha" stdDeviation="1" /><feOffset dx="0" dy="1" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" 

/></feMerge></filter></svg>');
	//ID/customBlur
	$('body').append('<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="customBlur" filterUnits="userSpaceOnUse" x="0" y="0" width="1000" 

height="400"><feGaussianBlur stdDeviation="3" /></filter></svg></div>');

	//切れ防止用
	//ID/drop-shadow2
	$('body').append('<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="drop-shadow2" x="-100%" y="-100%" width="400%" 

height="400%"><feGaussianBlur in="SourceAlpha" stdDeviation="3" /><feOffset dx="0" dy="0" /><feMerge><feMergeNode /><feMergeNode 

in="SourceGraphic" /></feMerge></filter></svg>');

	//UserAgent
	var ua=window.navigator.userAgent;
	//IE判定
	if(ua.match(/MSIE/) || ua.match(/Trident/)) {
		//MSIE=7 8 9 10/Trident=11
		$('#dropShadow feGaussianBlur').attr({'stdDeviation':3})
		$('#dropShadow2 feGaussianBlur').attr({'stdDeviation':3})
		$('#dropShadow3 feGaussianBlur').attr({'stdDeviation':1})
		$('#customBlur feGaussianBlur').attr({'stdDeviation':3})

		$('#drop-shadow2 feGaussianBlur').attr({'stdDeviation':3})
	}

  });

})(jQuery);


 

jQueryを使用しない場合のJS記載例


jQuery部分をjavascriptで記述したものでしたが、メンドウすぎるので使用しないことにしました。説明削除。

 


 

次回から通常の「svg」構成方法などイイカゲンとテキトウ、ゴマカシで探ってゆきます。

 


[ この記事のURL ]


タグ:SVG , javascript

 

ブログ記事一覧

年別アーカイブ一覧



[1]