JavaScript 获取 SVG xlink:href 属性值并去除#号

使用 JavaScript 获取 SVG xlink:href 属性值并去除#号

在处理 SVG 图像时，您可能需要通过 JavaScript 获取 'use' 元素的 'xlink:href' 属性值，并对该值进行操作，例如去除 '#' 符号。以下是一种实现方法：javascript// 假设 svgString 是包含 SVG 代码的字符串变量const svgString = '<svg xmlns='http://www.w3.org/2000/svg' ...>...';

// 创建一个临时的 div 元素const tempDiv = document.createElement('div');

// 将 SVG 字符串赋值给 div 的 innerHTML 属性tempDiv.innerHTML = svgString;

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

// 遍历 use 元素并获取 xlink:href 的内容useElements.forEach(element => { let xlinkHref = element.getAttribute('xlink:href'); // 去掉 # 号 xlinkHref = xlinkHref.replace('#', ''); console.log(xlinkHref); // 输出处理后的 xlink:href 值});

代码说明：

创建临时元素： 创建一个临时的 div 元素，用于承载 SVG 字符串。2. 设置 SVG 内容： 将包含 SVG 代码的字符串赋值给 div 元素的 innerHTML 属性。3. 获取 'use' 元素： 使用 querySelectorAll 方法选择所有 'use' 元素。4. 遍历 'use' 元素： 使用 forEach 方法遍历所有 'use' 元素。5. 获取 'xlink:href' 属性： 使用 getAttribute 方法获取每个 'use' 元素的 'xlink:href' 属性值。6. 去除 '#' 符号： 使用字符串的 replace 方法将 '#' 符号替换为空字符串。7. 输出结果： 将处理后的 'xlink:href' 值输出到控制台。

通过以上代码，您可以方便地获取 SVG 字符串中 'use' 元素的 'xlink:href' 属性值，并去除其中的 '#' 符号，以便进行后续处理。