使用jQuery来更改“xlink：href” SVG元素的属性 [英] Use jQuery to change "xlink:href" attribute of SVG element

查看：147
本文介绍了使用jQuery来更改“xlink：href” SVG元素的属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图通过点击事件来更改xlink：href属性，目前为止它已部分工作。这是我正在做的事情



HTML：

 < a href =＃class =ui-btn ui-corner-all ui-shadow editIcondata-iconpos =topdata-transition =nonestyle =text-align：center> 
< svg class =icon icon-pencil> 
< use xmlns：xlink =http://www.w3.org/1999/xlinkxlink：href =＃icon-pencil> < /使用> 
< / 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/xlinkxlink：href =＃icon-pencilhref =＃icon-floppy-disk>< /使用> 
< / svg>

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

解决方案

我今天有同样的问题，经过四处寻找，我发现了两个解决方案。正如@ Dr.Molle和@prodigitalson在这个问题的评论中所建议的，我能够使用： _HTMLNode_.setAttributeNS（）来解决我的问题，但我不确定为什么这样解决方案未能为您工作@cubanGuy。

在深入研究SVG Spec之后，我了解到 xlink：href 不推荐使用非命名空间 href 属性。 SVG元素中的 href 属性由SVGAnimatedString对象表示（用于反映一个可设置动画的字符串属性），它有两个属性： 

 接口SVGAnimatedString {
属性DOMString baseVal; 
只读属性DOMString animVal; 
};

这使我们能够改变 href _HTMLNode_.href.baseVal 这也会改变 xlink：href 属性，因为baseVal setter会如下：


如果 href 属性不存在，则定义SVGAnimatedString对象以反映已弃用的 xlink：href 属性（如果存在弃用属性）。然后它将deprecated属性设置为指定的值。

由于命名空间属性已被弃用，我建议 _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/svgid =svg-icons> < symbol viewBox =0 0 24 24id =unlocked> <路径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>< ; /路径> < /符号> < symbol viewBox =0 0 24 24id =locked> <路径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 >< /路径> < /符号>< / SVG> < DIV> < a href =＃id =editIcon1>这是测试1< svg class =icon icon-locked> <使用xmlns：xlink =http://www.w3.org/1999/xlinkxlink：href =＃unlocked> < /使用> < / SVG> < / A>< / DIV>< DIV> < a href =＃id =editIcon2>这是测试2< svg class =icon icon-locked> <使用xmlns：xlink =http://www.w3.org/1999/xlinkxlink：href =＃unlocked>< / use> < / SVG> < / div>



工作JSFiddle： https://jsfiddle.net/ybtq9e03/



我希望这有助于！


I'm trying to change the "xlink:href" attribute with a click event, and so far it is partially working. This is what I'm doing

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");



 }

 });

What is happening is that I'm able to change the class without any problems, but the "xlink:href" attribute doesn't change, instead, leaves the old one ("#icon-pencil"), and adds a new "href" attribute (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>

What am I missing here? Thanks!

解决方案

I had this same question today and after searching around I found two solutions that worked. As suggested by @Dr.Molle and @prodigitalson in this question's comments, I was able to use:_HTMLNode_.setAttributeNS() to fix my problem but I am not sure why this solution failed to work for you @cubanGuy.

After digging through SVG Spec, I learned that xlink:href is deprecated in favor of using a non-namespaced href attribute. The href attribute (on SVG elements) is represented with a SVGAnimatedString object (used to reflect an animatable string attribute) which has two properties:

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

This enables us to change the value of the href attribute by setting _HTMLNode_.href.baseVal which also changes the xlink:href attribute because the baseVal setter does the following:

If the href attribute is not present, the SVGAnimatedString object is defined to additionally reflect the deprecated xlink:href attribute if the deprecated attribute is present. Then it sets that deprecated attribute to the specified value.

Since the namespaced attribute is deprecated I recommend that _HTMLNode_.href.baseVal be used in favor of _HTMLNode_.setAttributeNS() when supporting modern browsers. If you want to see them in action I created a snippet that demonstrates both methods working below:

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>

Here is a working JSFiddle: https://jsfiddle.net/ybtq9e03/

I hope this helps!

这篇关于使用jQuery来更改“xlink：href” SVG元素的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆