所以我有一个单独的.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标签.我遇到的问题是我在我的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"); }); } });
基本上我只是删除元素并在元素悬停时将其重新附加到其父元素.
问题:当元素重新附加到文档中首先添加的地图上时,它将使用第二个地图上的径向渐变开始.这意味着当我悬停第一张地图时,状态会将颜色更改为与第二张地图上的颜色相同的颜色.
我相信这是因为它加载了两次相同的文件,因此渐变ID会发生冲突,导致重新连接的元素从HTML文档中找到的最后一个渐变标记中获取颜色,而不是其自己的SVG标记中存在的渐变标记.
所以这是我的问题,我该如何解决?我不想为每个具有唯一ID的地图创建新的SVG文件.我也不想通过javascript操纵id.有任何想法吗?
解决方法
像Iconic
SVGInjector或更新的Iconfu
SVGInject这样的SVG注入器通过在将SVG插入HTML文档时使ID唯一来处理此问题. Iconic注入器为ID添加运行编号(grad1变为grad1-1),而Iconfu注入器添加短随机字符串(grad1变为grad1-4ew8ZeSw).
如果两个SVG使用相同的ID,并且在HTML文档中多次使用相同的SVG,则不仅需要使ID唯一.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。