javascript - 同一 HTML 文档中包含的两个不同 SVG 文件中的 ID 冲突

Question

所以我有一个 .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 文件的简化版本。它表示一个 map ，其中每个状态都是一个路径元素。每个状态也有一个与之关联的 radialgradient 标签。我遇到的问题是我在我的 HTML 文档中两次包含此 SVG 文件，并且我更改了 svg 上的径向渐变标签以分别更改每个 map 上的状态颜色。

map 中也有一些交互性，我使用以下代码加载 svg 并添加事件，当用户将鼠标悬停在 map 上时，将状态带到前面(因此它的笔画可见):

$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");
        });
    }
});

基本上我只是删除元素并在元素悬停时将其重新附加到其父元素。

问题:当元素重新附加到文档中首先添加的 map 时，它开始使用第二张 map 上存在的径向渐变。这意味着当我将鼠标悬停在第一张 map 上时，各州的颜色会更改为与第二张 map 上相同的颜色。

我认为这是因为同一个文件加载了两次，渐变 id 冲突导致重新附加的元素从 HTML 文档中找到的最后一个渐变标签中获取其颜色，而不是它自己的渐变标签中存在的渐变标签SVG 标签。

这是我的问题，我该如何解决？我不想为每个具有唯一 ID 的 map 创建一个新的 SVG 文件。我也不想通过 javascript 操纵 id。有什么想法吗？

Answer 1

像 Iconic 这样的 SVG 注入(inject)器 SVGInjector或更新的 Iconfu SVGInject通过在将 SVG 插入 HTML 文档时使 ID 唯一来处理此问题。 Iconic 注入(inject)器向 ID 添加一个连续数字(grad1 变为 grad1-1)，而 Iconfu 注入(inject)器添加一个短的随机字符串(grad1变成类似grad1-4ew8ZeSw)的东西。

使 ID 唯一不仅在两个 SVG 使用相同 ID 时是必要的，而且在 HTML 文档中多次使用相同 SVG 时也是如此。