首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >同一HTML文档中包含的两个不同SVG文件中存在冲突的in

同一HTML文档中包含的两个不同SVG文件中存在冲突的in
EN

Stack Overflow用户
提问于 2013-02-08 21:45:24
回答 1查看 4.8K关注 0票数 7

所以我有一个单独的.svg文件,带有一些预先制作的渐变效果,如下所示:

代码语言:javascript
运行
复制
<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,并添加当用户将鼠标悬停在地图上时将状态置于最前面(以便其笔划可见)的事件:

代码语言:javascript
运行
复制
$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。有什么想法吗?

EN

回答 1

Stack Overflow用户

发布于 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的情况下也是如此。

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14773940

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档