使用jQuery更改SVG元素的"xlink:href"属性

Question

我是一名有用的助手，可以为您翻译文本。

我正在尝试使用点击事件更改“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>

我在这里错过了什么？谢谢！

- cubanGuy

---

尝试在:前面放置两个反斜杠：\\: 或者使用 $('[xlink\\:href]')。 - Sebastian Simon

http://stackoverflow.com/questions/22081551/svg-image-turns-black-after-updating-his-path-via-jquery/22081746 - Dr.Molle

除非有插件，否则我认为 jQuery 无法让你设置命名空间属性。你可能需要使用原生 DOM 函数：$("a.editIcon svg use").get(0).setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#icon-pencil'); - prodigitalson

感谢大家的帮助。实际上，@Dr. Molle和@prodigitalson两者都有相同的效果，它会让它附带'xlink：href =“＃icon-pencil”href =“＃icon-floppy-disk” '。我想我必须找到另一种方式，可能是replaceWith（）并替换整个内容。 - cubanGuy

Answer 1

我今天也有同样的问题，经过搜索，我找到了两个解决方案。正如@Dr.Molle和@prodigitalson在这个问题的评论中建议的那样，我能够使用_HTMLNode_.setAttributeNS()来解决我的问题，但我不确定为什么这个解决方案对你@cubanGuy无效。

在查阅SVG规范后，我发现xlink:href已被弃用，应该使用非命名空间的href属性。 SVG元素上的href属性表示为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/

希望这可以帮助你！

- Kenneth Moore