SVGのリンクでJavaScriptを実行する

SVG内のリンクをクリックしたときに、外部ファイルのJavaScriptでSVG内の操作ができるかどうかを試してみました。

サンプルコード

fill属性の書き換えとheightのアニメーションでの変更を試してみました。

HTML

<svg width="700" height="300" viewBox="0 0 700 300">
	<a xlink:href="" id="box1">
		<rect width="100" height="100" x="100" y="100" fill="red" />
	</a>
	<a xlink:href="" id="box2">
		<rect width="100" height="100" x="300" y="100" fill="blue" />
	</a>
	<a xlink:href="" id="box3">
		<rect width="100" height="100" x="500" y="100" fill="green" id="box3-rect" />
	</a>
</svg>

JavaScript

$(function() {
	$('#box1').on('click', function(e) {
		$(this).children().attr('fill', 'black');
		e.preventDefault();
	});
	$('#box2').on('click', function(e) {
		$(this).children().animate({
			height: 200
		});
		e.preventDefault();
	});
});

document.getElementById('box3').addEventListener('click', function(e) {
	var box3Rect = document.getElementById('box3-rect');
	var timer = setInterval(function() {
		var box3RectH = parseFloat(box3Rect.getAttribute('height'));
		if(box3RectH < 200) {
			box3Rect.setAttribute('height', box3RectH + 1);
		} else {
			clearInterval(timer);
		}
	}, 3);
	e.preventDefault();
}, false);

JavaScriptで操作するデモページ

jQueryのanimate()を使ってアニメーションさせた場合、heightが一旦0になってからアニメーションが開始されるようです。
setIntervalを使ってアニメーションさせた場合は問題なさそうでした。

SVGでアニメーションさせる場合、setIntervalを使って行うか、SVGのanimateタグあたりを使うのがよさそうです。