jQueryとSVGでhoverすると色かわるみたいな〜

プログラミング jQuery+JavaScript

サンプルはこちら→W7工廠分室|トップページ
イメージマップ(map area要素)を作るより、イラレで直接SVG出力したほうが簡単かなと思って作りました。
いいえ。半分は嘘ですｗ


roomx氏に<map>と<area>で画像内にリンク配置。ソレにhoverで変色効果つけてネ…(；´Д｀) - roomX’s BLOGを作られてしまったので
（jQueryなしで動くし、ソースコードも綺麗で解説も丁寧ｗ）
最後に「ん？出来たんだ？じゃあ、次はSVG画像で造ってね…(；´Д｀)」って言われてるので作ってみましたｗ
SVG自体中身をあまり見ていなかったのですが・・・こっちのほうが簡単？
座標操作が要らないし、複雑になると下記のものだとだめなのでしょうが参考までに。


■仕組み
まず
色設定が各図形で宣言されてなく、前に宣言された要素の情報を引き継ぐ形？＝個々に色設定がないのが問題
解決方法として色宣言を探し出して処理する方法もあると思いますが、図形の上乗せにすることにしました。
なので
マウスが乗る(mouseenter)と、形状を複写(clone)してそれに宣言している色をつける。これをafterで直後に配置。
マウスが離れる(mouseleave)と、複写した形状を(nextで指定)削除する
躓いたのは
・xhtmlでないとだめ←あたりまえｗ
・svgをxhtmlに直接記述(Aiから書き出したものからSVGタグ範囲を移動)
・「clone(true)」にすると延々と複写し続ける。
・mouseleaveはmouseenter内に記述する。
■不具合
動作チェックするとIEでは動きませんでした（汗）←cloneがあやしいｗ
あと、下記SVGでテキスト部分のタグを数段にしていますが、これをすると文字が崩れるみたい・・・
処理が重い・・・かもしれません


改良の余地は大なのですが別件で忙しいのでとりあえず。
よくみたら・・・roomx氏が目指しているのは「SVG画像」なんですね・・・


xhtml(jq_svg.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	
	<script type="text/javascript" src="./lib/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./lib/jq_svg.js"></script>
</head>
<body>
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89"
	 xml:space="preserve">
	<rect x="77.829" y="137.171" fill="#FFF200" stroke="#000000" stroke-miterlimit="10" width="269.513" height="201.219"/>
	<ellipse fill="#00A0E9" stroke="#000000" stroke-miterlimit="10" cx="341.854" cy="360.342" rx="110.366" ry="109.756"/>
	<text transform="matrix(1 0 0 1 125.3901 424.9756)">
		<tspan x="0" y="0" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="12">あ</tspan>
		<tspan x="12" y="0" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="12" letter-spacing="-1">いうえお</tspan>
	</text>
	<ellipse fill="#22AC38" cx="187.735" cy="523.756" rx="109.906" ry="89.024"/>
	<ellipse cx="449.78" cy="570.707" rx="71.951" ry="65.244"/>
	<ellipse fill="#C30D23" cx="468.683" cy="149.976" rx="53.049" ry="51.829"/>
	<polygon fill="#22AC38" points="88.805,46.927 36.366,153.024 102.22,178.634 144.902,81.073 244.902,71.317 253.439,28.634 "/>
</svg>
</body>
</html>

javascript(jq_svg.js)

var hoverColor="red";//色設定
$(function(){
	$("svg").children().mouseenter(function(){
		$(this).after(
			$(this).clone().attr({"fill":hoverColor})
		);
		$(this).next().mouseleave(
			function(){$(this).after().remove()}
		);
	});
});

こんなのも
javascript

var hoverColor="red";
$(function(){
	$("svg").children().mouseenter(function(){
		$(this)
			.clone()
			.attr({"fill":hoverColor})
			.insertAfter($(this))
			.mouseleave(function(){
				$(this).remove()
			});
	});
});