JavaScript 获取 SVG 中所有 xlink:href 属性值

JavaScript 获取 SVG 中所有 xlink:href 属性值

您可以使用 JavaScript 的 DOM 操作轻松获取 SVG 文件中所有 'use' 元素的 'xlink:href' 属性值。以下是一个示例代码：

// 获取 svg 元素
var svg = document.querySelector('svg');

// 获取所有的 use 元素
var useElements = svg.querySelectorAll('use');

// 遍历 use 元素并获取 xlink:href 的内容
for (var i = 0; i < useElements.length; i++) {
  var xlinkHref = useElements[i].getAttributeNS('http://www.w3.org/1999/xlink', 'href');
  console.log(xlinkHref);
}

这段代码的工作原理如下：

1. 获取 SVG 元素: document.querySelector('svg') 用于选择文档中的第一个 'svg' 元素。
2. 获取所有 'use' 元素: svg.querySelectorAll('use') 会返回一个包含所有 'use' 元素的 NodeList。
3. 遍历 'use' 元素: 使用 for 循环遍历所有 'use' 元素。
4. 获取 'xlink:href' 属性值: getAttributeNS('http://www.w3.org/1999/xlink', 'href') 方法用于获取每个 'use' 元素的 'xlink:href' 属性值。
   • 注意: 由于 'xlink:href' 是一个命名空间属性，因此需要使用 getAttributeNS 方法而不是 getAttribute 方法。
5. 输出结果: console.log(xlinkHref) 将每个 'xlink:href' 的值打印到控制台。

希望这可以帮助您从 SVG 文件中提取所有 'xlink:href' 属性值！