SVG 元素的 outerHTML

Posted 2023-05-07

【中文标题】SVG 元素的 outerHTML

【英文标题】：outerHTML of an SVG element

【发布时间】：2012-09-17 12:42:15

【问题描述】：

为什么我们不能获取带有element.outerhtml 属性的svg 元素的outerHTML？

这种方式是最好的http://jsfiddle.net/33g8g/获取svg源代码吗？

【参考方案1】：

SVGElements 没有 outerHTML 属性。

你可以在纯javascript中这样定义

Object.defineProperty(SVGElement.prototype, 'outerHTML', 
    get: function () 
        var $node, $temp;
        $temp = document.createElement('div');
        $node = this.cloneNode(true);
        $temp.appendChild($node);
        return $temp.innerHTML;
    ,
    enumerable: false,
    configurable: true
);

或者单行 jQuery 解决方案是

$('<div>').append($(svgElement).clone()).html();

参考： https://gist.github.com/jarek-foksa/2648095

【讨论】：

感谢分享 - 让 outerHTML 在 Safari 中工作真是太费时间了！

我会在 polyfill 周围添加 if (!('outerHTML' in SVGElement.prototype)) /** */

【参考方案2】：

这是一个更简单的解决方案，它在 FF、Chrome、IE 中运行良好。荣誉归Philipp Wrann。

outerHtml is not working in IE

new XMLSerializer().serializeToString(document.querySelector('#b'))

【讨论】：

这对我有用。在 Angular 2+ 中，我可以在 SVGElement 上使用它 示例：const element: SVGElement = canvas.getPreview(); const svgString: string = w XMLSerializer().serializeToString(element);

【参考方案3】：

2013 年更新：innerHTML 和 outerHTML 也将支持 svg 元素，根据 DOM Parsing specification。

Blink/Chrome 中已经发布了一个补丁，即将推出，请参阅 http://code.google.com/p/chromium/issues/detail?id=311080。

【讨论】：

我可以确认这在最新版本的 Chrome、Safari 和 Firefox 上完美运行。唉，它在 Internet Explorer 11 上不起作用。

【参考方案4】：

无法通过 outerHTML 访问它，因为 SVG 不是 HTML —— 它是一个单独的 XML specification。

这就是为什么，例如，该示例中的 svg 节点定义了自己的命名空间 (xmlns="http://www.w3.org/2000/svg)。

您的示例对于一次性查询可能是最方便的，但实际上可以使用本机属性进行挖掘。只是需要更多的工作。

让我们使用链接的示例节点：

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="0" y="15" fill="black">An SVG element.</text>
</svg> 

如果要提取命名空间和版本，请使用attributes 属性。

var svgElement = $('svg')[0]; // using your example
console.log(svgElement.attributes.xmlns); // outputs "http://www.w3.org/2000/svg"
console.log(svgElement.attributes.version); // outputs "1.1"

如果要提取实际内容，请遍历子项。与上述类似，非文本节点的 attributes 集合将包含 x/y 值（等）。

不使用 jQuery，再次使用您的示例：

for (var i = 0; i < svgElement.childNodes.length; i++) 
    var child = svgElement.childNodes[i];
    if (child.nodeType == 1) 
        console.log(child.attributes[0].name); // "x"
        console.log(child.attributes[0].value); // "0"
        console.log(child.attributes[1].name); // "y"
        console.log(child.attributes[1].value); // "15"
    

这是一个更新的 Fiddle，更优雅地展示了各种可能性： http://jsfiddle.net/33g8g/8/

【参考方案5】：

使用 jQuery，您可以轻松地为任何不支持 outerHTML 的元素创建临时 HTML 包装器：

function wrappedHtml(elt)
    var wrapped = elt.wrap("<wrap></wrap>").parent().html();
    elt.unwrap();
    return wrapped;