使用jQuery更改SVG元素的“ xlink：href”属性

Question

我正在尝试通过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>

我在这里想念什么？ 谢谢！

Answer 1

我今天也遇到了同样的问题，在搜索后发现了两个可行的解决方案。 正如@ Dr.Molle和@prodigitalson在此问题的评论中所建议的那样，我能够使用： _HTMLNode_.setAttributeNS()解决我的问题，但是我不确定为什么该解决方案对您@cubanGuy无效。

在浏览了SVG Spec之后，我了解到不赞成使用xlink:href ，而赞成使用非命名空间的href属性。 href属性（在SVG元素上）由SVGAnimatedString对象（用于反映可动画的字符串属性）表示，该对象具有两个属性：

interface SVGAnimatedString {
         attribute DOMString baseVal;
readonly attribute DOMString animVal;
};

这使我们能够通过设置_HTMLNode_.href.baseVal来更改href属性的值，这也将更改xlink:href属性，因为baseVal设置程序会执行以下操作：

如果href属性不存在，则定义SVGAnimatedString对象以另外反映不赞成使用的xlink:href属性（如果存在不赞成使用的属性）。 然后，它将不推荐使用的属性设置为指定的值。

由于不推荐使用命名空间属性， _HTMLNode_.href.baseVal在支持现代浏览器时，建议使用_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/

我希望这有帮助！