使用 jQuery 更改 SVG 元素的 “xlink:href” 属性
Use jQuery to change "xlink:href" attribute of SVG element
我正在尝试使用单击事件更改"xlink:href"属性,到目前为止它部分工作。这就是我正在做的
.HTML:
<a href="#" class="ui-btn ui-corner-all ui-shadow editIcon" data-iconpos="top" data-transition="none" style="text-align:center">
<svg class="icon icon-pencil">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-pencil"> </use>
</svg>
</a>
.JS:
$('a.editIcon').on('click', function () {
if ($("a.editIcon svg").attr('class') == 'icon icon-pencil') {
$("a.editIcon svg").attr("class", "icon icon-floppy-disk");
$("a.editIcon svg use").attr("xlink:href", "#icon-floppy-disk");
} else {
myFunctionCall();
$("a.editIcon svg").attr("class", "icon icon-pencil");
$("a.editIcon svg use").attr("xlink:href", "#icon-pencil");
}
});
正在发生的事情是我能够毫无问题地更改类,但是"xlink:href"属性没有改变,而是保留旧的属性("#icon-pencil"(,并添加了一个新的"href"属性(href="#icon-floppy-disk"(:
<svg class="icon icon-floppy-disk">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-pencil" href="#icon-floppy-disk"></use>
</svg>
我在这里错过了什么?谢谢!
我今天有同样的问题,在搜索之后,我找到了两个有效的解决方案。正如@Dr.Molle和@prodigitalson在这个问题的评论中所建议的那样,我能够使用: _HTMLNode_.setAttributeNS()
来解决我的问题,但我不确定为什么这个解决方案@cubanGuy不适合你。
在深入研究 SVG 规范后,我了解到xlink:href
已被弃用,取而代之的是使用非命名空间的 href
属性。href
属性(在 SVG 元素上(由 SVGAnimatedString 对象(用于反映可动画字符串属性(表示,该对象具有两个属性:
interface SVGAnimatedString {
attribute DOMString baseVal;
readonly attribute DOMString animVal;
};
这使我们能够通过设置 _HTMLNode_.href.baseVal
来更改 href
属性的值,这也更改了 xlink:href
属性,因为 baseVal setter 执行以下操作:
如果
href
属性不存在,则 SVGAnimatedString 对象定义为另外反映已弃用的xlink:href
属性(如果存在已弃用的属性(。然后,它将该已弃用的属性设置为指定的值。
由于命名空间属性已弃用,因此我建议在支持现代浏览器时_HTMLNode_.href.baseVal
使用_HTMLNode_.setAttributeNS()
。如果您想查看它们的实际效果,我创建了一个代码片段,演示了以下两种方法:
var svgElement1 = document.getElementById("editIcon1");
svgElement1.onclick = function () {
var useElement = this.getElementsByTagName("use")[0];
if (this.className === 'icon icon-locked') {
this.className = "icon icon-unlocked";
useElement.href.baseVal = "#unlocked";
} else {
this.className = "icon icon-locked";
useElement.href.baseVal = "#locked";
}
}
var svgElement2 = document.getElementById("editIcon2");
svgElement2.onclick = function () {
var useElement = this.getElementsByTagName("use")[0];
if (this.className === 'icon icon-locked') {
this.className = "icon icon-unlocked";
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#unlocked');
} else {
this.className = "icon icon-locked";
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#locked');
}
}
<svg xmlns="http://www.w3.org/2000/svg" id="svg-icons">
<symbol viewBox="0 0 24 24" id="unlocked">
<path d="M18,9h-1V7c0-2.8-2.2-5-5-5S7,4.2,7,7h1.9c0-1.7,1.4-3.1,3.1-3.1s3.1,1.4,3.1,3.1v2H6c-1.1,0-2,0.9-2,2v9c0,1.1,0.9,2,2,2
h12c1.1,0,2-0.9,2-2v-9C20,9.9,19.1,9,18,9z"></path>
</symbol>
<symbol viewBox="0 0 24 24" id="locked">
<path d="M18,9h-1V7c0-2.8-2.2-5-5-5S7,4.2,7,7v2H6c-1.1,0-2,0.9-2,2v9c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-9C20,9.9,19.1,9,18,9z
M15.1,9H8.9V7c0-1.7,1.4-3.1,3.1-3.1s3.1,1.4,3.1,3.1V9z"></path>
</symbol>
</svg>
<div>
<a href="#" id="editIcon1">this is test 1
<svg class="icon icon-locked">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#unlocked"> </use>
</svg>
</a>
</div>
<div>
<a href="#" id="editIcon2">this is test 2
<svg class="icon icon-locked">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#unlocked"></use>
</svg>
</a>
</div>
这是一个工作JSFiddle:https://jsfiddle.net/ybtq9e03/
我希望这有帮助!
- 在单击href链接的同时下载文件
- 如果href包含X,请更改href
- 锚点元素的href属性自动更改
- 锚点元素不't使用svg时,请打开EDGE上的href
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- Href:当前DIV中的目标ID
- href属性内的javascript函数
- ng绑定和ng href问题.ng href未从控制器加载数据
- D3 xlink:“href”在Google Chrome上可以很好地附加图像,但在Firefox上则不然
- 更改 xlink:当图像在 D3js 中未退出时 svg 图像的 href 链接
- Angular2 xlink:href Issues
- 如何使嵌入在HTML中的SVG加载其xlink:href依赖项
- 更改Google Chrome中的xlink:href属性
- jQuery UI正在禁用SVG图像中的链接(xlink:href)
- 使用xlink:href,将svg保存为png
- 使用angularjs将svg中的xlink:href设置为base64编码的图像
- 使用 jQuery 更改 SVG 元素的 “xlink:href” 属性
- 添加类到xlink:href
- d3js:`xlink:href`不起作用