我正在尝试使用click事件更改“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>
我在这里缺少什么?谢谢!
答案 0 :(得分:3)
我今天也有同样的问题,在搜索之后我找到了两个有效的解决方案。正如@ Dr.Molle和@prodigitalson在这个问题的评论中所建议的,我能够使用:_HTMLNode_.setAttributeNS()
来解决我的问题,但我不确定为什么这个解决方案无法为你工作@cubanGuy。
在深入研究SVG规范之后,我了解到{I}被弃用,而不是使用非命名空间的xlink:href
属性。 href
属性(在SVG元素上)用SVGAnimatedString对象(used to reflect an animatable string attribute)表示,该对象有两个属性:
href
这使我们可以通过设置interface SVGAnimatedString {
attribute DOMString baseVal;
readonly attribute DOMString animVal;
};
来更改href
属性的值,这也会更改_HTMLNode_.href.baseVal
属性,因为baseVal setter执行以下操作:
如果
xlink:href
属性不存在,则定义SVGAnimatedString对象以另外反映已弃用的href
属性(如果存在deprecated属性)。然后,它将deprecated属性设置为指定值。
由于不推荐使用namespaced属性,因此建议在支持现代浏览器时使用xlink:href
以支持_HTMLNode_.href.baseVal
。如果你想看到它们的实际应用,我创建了一个片段,演示了以下两种方法:
_HTMLNode_.setAttributeNS()
&#13;
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');
}
}
&#13;
这是一个有效的JSFiddle:https://jsfiddle.net/ybtq9e03/
我希望这有帮助!