获取 SVG 的“xlink:href\"属性在 HTML DOM 中动态使用 JS 的元素

2023-03-30 06:58| 来源: 网络整理| 查看: 265

本文介绍了获取 SVG 的“xlink:href”属性在 HTML DOM 中动态使用 JS 的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我有一个结构:

我想获得 pic.jpg url，我需要从最外面的 div 开始，而不是完全从源元素开始:

var div = document.getElementById("div");var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', '图片')[0];var url = img.getAttribute('xlink:href');//请注意我没有使用 getAttributeNS()，只是通常的 getAttribute()警报(网址)；//pic.jpg，工作正常

我的问题是从 SVG 及其子元素等元素获取此类属性的正确方法是什么?

因为在我尝试这样做之前，它在 Chrome 中也运行良好(我没有尝试其他浏览器):

var svg = div.getElementsByTagName('svg')[0];//我不使用 NSvar img = svg.getElementsByTagName('image')[0];var url = img.getAttribute('xlink:href');//也不要在这里使用 getAttributeNS()警报(网址)；//pic.jpg，工作正常

但是当我尝试使用 getAttributeNS() 时，我得到了空白结果:

var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', '图片')[0];//请注意我确实使用了 getAttributeNS()var url = img.getAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href');警报(网址)；//但我得到了黑色结果，空警报窗口解决方案

正确的用法是 getAttributeNS('http://www.w3.org/1999/xlink', 'href');

I have a construction:

I want to get pic.jpg url and I need to begin from the most outer div, not exactly from the source element:

var div = document.getElementById("div"); var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0]; var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0]; var url = img.getAttribute('xlink:href'); // Please pay attention I do not use getAttributeNS(), just usual getAttribute() alert(url); // pic.jpg, works fine

My question is what is the right way to get such kind of attributes from element like SVG and its children?

Because before I tried to do this way and it also worked fine in Chrome (I didn’t try other browsers):

var svg = div.getElementsByTagName('svg')[0]; // I do not use NS var img = svg.getElementsByTagName('image')[0]; var url = img.getAttribute('xlink:href'); // and do not use getAttributeNS() here too alert(url); // pic.jpg, works fine

But when I tried to use getAttributeNS() I got blank result:

var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0]; var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0]; // Please pay attention I do use getAttributeNS() var url = img.getAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href'); alert(url); // but I got black result, empty alert window 解决方案

The correct usage is getAttributeNS('http://www.w3.org/1999/xlink', 'href');

这篇关于获取 SVG 的“xlink:href”属性在 HTML DOM 中动态使用 JS 的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，WP2

获取 SVG 的“xlink:href\”属性在 HTML DOM 中动态使用 JS 的元素为WP2原创文章，链接：https://www.citrix.wp2.cn/other/%e8%8e%b7%e5%8f%96-svg-%e7%9a%84xlinkhref%e5%b1%9e%e6%80%a7%e5%9c%a8-html-dom-%e4%b8%ad%e5%8a%a8%e6%80%81%e4%bd%bf%e7%94%a8-js-%e7%9a%84%e5%85%83%e7%b4%a0/

【本文地址】

公司简介

联系我们