SVG Filterを使ってみる
SVG Filterを使うと、グラフィクスにエフェクトをかけることができます。ここでは、灯の日本地図と同様の、ガウシアンブラーを適用してみます。ブラーを使うと画像にぼかし効果を与えることができます。
...
<filter id="gaussian-blur" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="13.135"/>
</filter>
...
<circle cx="200" cy="200" r="50"
fill="rgba(0,0,255,0.8)" stroke-width="5" stroke="black" filter="url(#gaussian-blur)"/>
...
SVG Filterにはぼかすだけでなく、色を混ぜ合わせたり、色の平坦化、グラデーションまでさまざまな効果をもたらすものがあります。本来なら1つ1つ説明していきたいところですが、ここでは割愛させて頂きます。より詳しく知りたい方はこちらをご参照ください。
SVGをobjectとして埋め込む
灯では、SVGの上にCanvasを重ねて表示させており、複数の異なる描画コンポーネントを組み合わせて表示しています。そのため最上位のHTML＋JavaScriptから適宜操作できるような構造にしています。ここでもそれに倣い、SVGをHTMLの描画要素の1つとして取り込み、操作します。取り込みにはobjectエレメントを利用します（SVGは同様なので割愛します）。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>svg_7</title> </head> <body> <object id="sample-svg" width="100%" height="100%" data="svg_6.svg" type="image/svg+xml" ></object> </body> </html>
objectエレメントのdata属性にSVGドキュメントまでのパスを指定することで、取り入れることが可能になります。
SVGとJavaScriptの連携をはかる
objectとして読み込んだSVG上のマウスやキーボードの各種イベントの取得やDOMなどの追加や変更・削除などはJavaScriptから操作可能です。以下のサンプルでは、三角・丸・四角・イメージ、それぞれのクリックイベントをとって、そのエレメントの持つIDをalertにて表示してみます。要素を特定してリスナを登録したいため、SVG内のそれぞれのエレメントに対してIDを振っています（svg_8.svg）。HTMLは、jsやsvgの読み込み先が変わるだけなので割愛します。
...
<line id="line-element" x1="200" y1="50" x2="200" y2="350"
stroke-width="5" stroke="black" />
<path id="path-element" d="M 200 50 L 150 150 L 250 150 z"
fill="white" stroke-width="5" stroke="black" />
<circle id="circle-element" cx="200" cy="200" r="50"
fill="rgba(0,0,255,0.8)" stroke-width="5" stroke="black" filter="url(#gaussian-blur)"/>
<rect id="rect-element" x="150" y="250" width="100" height="50"
fill="red" stroke-width="5" stroke="black"/>
<text id="text-element" x="72" y="100"
font-family="Arial" font-size="30" fill="white" stroke="blue">
HELLO CANVAS
</text>
<image id="image-element" x="200" y="200" width="122px" height="100px"
xlink:href="dino.png">
</image>
...
function alertID(event) {
var target = event.target;
var id = target.getAttribute("id");
alert(id);
}
$(document).ready(function(){
var svgobject = document.getElementById("sample-svg");
svgobject.addEventListener("load", function(eventOfLoad) {
//object で読み込まれた SVG ドキュメントを取得する
var svgDocument = eventOfLoad.target.getSVGDocument();
//各要素を取得する
var lineElement = svgDocument.getElementById("line-element");
var pathElement = svgDocument.getElementById("path-element");
var circleElement = svgDocument.getElementById("circle-element");
var rectElement = svgDocument.getElementById("rect-element");
var textElement = svgDocument.getElementById("text-element");
var imageElement = svgDocument.getElementById("image-element");
//マウスリスナを登録する
lineElement.addEventListener("click", alertID, false);
pathElement.addEventListener("click", alertID, false);
circleElement.addEventListener("click", alertID, false);
rectElement.addEventListener("click", alertID, false);
textElement.addEventListener("click", alertID, false);
imageElement.addEventListener("click", alertID, false);
}, false);
});
実装では、objectエレメント内の読み込み完了を待ち、SVG Documentを取得しています。その後、SVG内に配置したrectやlineなどの描画要素を取得しています。それぞれのエレメントにマウスクリックイベント取得のリスナを登録し、クリックされればIDを取り出してalert表示しています（※SVGについてより詳しい情報が欲しい方はこちらを参照ください）。
