javascript - .outerHTML 中不存在命名空间属性

标签 javascript svg dom namespaces xhtml

在 HTML5/JavaScript 中,如果我以编程方式创建一个命名空间 dom 节点,如下所示:

svgElt = document.createElementNS("http://www.w3.org/2000/svg", 'svg')

节点“知道”它自己的命名空间,我可以这样检索:
svgElt.namespaceURI // result: "http://www.w3.org/2000/svg"

但是命名空间不被视为“正常”属性:
svgElt.getAttribute('xmlns') // result: null

所以以编程方式创建的节点的行为不同于等效的“直”节点
<svg xmlns="http://www.w3.org/2000/svg" id="mySVG"></svg>

其中.getAttribute作品:
document.getElementById('mySVG').getAttribute('xmlns') // result: "http://www.w3.org/2000/svg"

这是我使用 .outerHTML 时的潜在问题并需要结果中包含的命名空间信息。以编程方式创建的节点的命名空间信息可能会丢失,我可能必须手动添加它;这似乎是“我不应该关心的事情”——这就是问题所在。

您需要的示例 .outerHTML当您想将内联 SVG 节点转换为 Image 时,其中包含命名空间信息(请参阅 this question ,Hubert OG 的回答)通过将图像源设置为数据 url ,如
'data:image/svg+xml,' + your_svg_element.outerHTML

我做的是
svgNode.setAttribute('xmlns', svgNode.namespaceURI)

SVG -> 图像转换(正如我实现的那样)没有这个技巧就无法工作;另请参阅我对上面链接问题的回答。

有没有更好/更优雅的方法来做到这一点? svgElt.getAttribute('xmlns')的目的是什么?返回 null ?缺陷还是特点?

最佳答案

您可以简单地使用 XMLSerializer为此,这会将您的 DOM 树字符串化为 xml,从而保留 namespace 。

const svgElt = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
const serialized = new XMLSerializer().serializeToString(svgElt);
console.log(serialized);

关于javascript - .outerHTML 中不存在命名空间属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62109331/

相关文章:

javascript - DatePicker:尝试设置日期时出错

SVG:一个过滤器中的多种效果

javascript - 获取相对于父元素的点击范围

c# - Selenium 的 GetAttribute 方法的复杂性

javascript - 在调整大小时重绘 SVG

PHP DOM - 访问新添加的节点

javascript - 有没有办法使用 JS 和 ASP

javascript - 使用 Javascript node.js 如何并行处理 For 循环?

javascript - AngularJs 多个同名 Controller 在一个文件中隔离作用域

javascript - Node js - 如何将多个 SVG 文件提供给浏览器