所以我有一个单独的.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文件的简化版本。它表示一个映射,其中每个状态都是一个路径元素。每个状态还具有与其关联的径向梯度标记。我遇到的问题是,我在HTML文档中包含了这个SVG文件两次,并且我更改了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");
});
}
});基本上,我只是删除元素,并在元素悬停时将其重新附加到其父元素。
问题:当元素被重新附加到文档中第一个添加的地图上时,它开始使用第二个地图上存在的径向渐变。这意味着当我悬停第一张地图时,状态会将颜色更改为与第二张地图上相同的颜色。
我认为这是因为同一个文件加载了两次,所以渐变in冲突,导致重附加的元素从HTML文档中找到的最后一个渐变标记中获取颜色,而不是从它自己的SVG标记中出现的渐变标记中获取颜色。
这就是我的问题,我该如何解决它呢?我不想为每个具有唯一ids的地图创建一个新的SVG文件。我也不想用javascript来操纵ids。有什么想法吗?
发布于 2018-09-11 14:34:43
SVG注入器,如Iconic或较新的Iconfu,在将SVGInject插入SVGInjector文档时,通过使ID唯一来处理这个问题。图标注入器向ID添加一个序列号(grad1变为grad1-1),而Iconfu注入器添加一个简短的随机字符串(grad1变为类似grad1-4ew8ZeSw)。
使ID唯一不仅在两个SVG使用相同ID的情况下是必要的,而且在HTML文档中多次使用同一SVG的情况下也是如此。
https://stackoverflow.com/questions/14773940
复制相似问题