Question

为什么我们不能获得具有element.outerHTML属性的svg元素的outerHTML？

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

Answer 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

Answer 2

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

此补丁已在Blink / Chrome中登陆，即将推出，请参阅http://code.google.com/p/chromium/issues/detail?id=311080。

Answer 3

无法通过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"
    }
}

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

Answer 4

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

outerHtml is not working in IE

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

Answer 5

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

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

SVG元素的outerHTML

5 个答案: