したがって、次のようないくつかの事前作成されたグラデーション効果を含む単一の .svg ファイルがあります。
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="1052.4" width="744.09" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 670 680" style="width: 100%; height: 100%;">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color: #a0a0a0;" />
<stop offset="100%" style="stop-color: #a0a0a0;" />
</radialGradient>
</defs>
<g>
<path id="path1" d="m124 263.35c6.4216-12.385 18.974-0.67157 0.72621z" fill="url(#grad1)">
</path>
</g>
</svg>
これは私の svg ファイルの簡易版です。これは、各状態がパス要素であるマップを表します。各状態には、radialgradient タグも関連付けられています。私が抱えている問題は、この SVG ファイルを HTML ドキュメントに 2 回含め、svg の放射状グラデーション タグを変更して、各マップの州の色を個別に変更することです。
マップにはいくつかの対話機能もあります。次のコードを使用して、svg を読み込み、ユーザーがマップ上にマウスを置いたときに状態を前面に表示するイベントを追加します (そのストロークが表示されるようにします)。
$divSVG.load("map.svg", function() {
$svg= $(this).find("svg");
$svg.find("path").each(function() {
$(this).bind("mouseenter", function() {
var $path= $(this);
var $parent= $path.parent();
//its necessary to detach and reattach the element so it comes to the front
//of the image (there is no z-index in SVG)
$path.detach();
$parent.append($path);
$path
.css("stroke", "#FF0000")
.css("stroke-width", "5px");
});
$(this).bind("mouseleave", function() {
$(this)
.css("stroke", "#FFFFFF")
.css("stroke-width", "3px");
});
}
});
基本的に、要素がホバーされたときに、要素を削除して親に再接続するだけです。
問題: 要素がドキュメントに最初に追加されたマップに再アタッチされると、2 番目のマップに存在する放射状グラデーションの使用が開始されます。つまり、最初のマップにカーソルを合わせると、州の色が 2 番目のマップと同じ色に変わります。
これの原因は、同じファイルが 2 回読み込まれたため、グラデーション ID が競合しているため、再接続された要素が、独自の SVG タグに存在するグラデーション タグではなく、HTML ドキュメントで見つかった最後のグラデーション タグから色を取得するためだと思います。
ここに私の問題があります。どうすれば解決できますか？一意の ID を持つマップごとに新しい SVG ファイルを作成したくありません。また、JavaScript で ID を操作したくありません。何か案は？