在 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/