23

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

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

4

5 回答 5

23

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

于 2013-12-13T05:39:49.780 回答
9

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

outerHtml 在 IE 中不起作用

new XMLSerializer().serializeToString(document.querySelector('#b'))
于 2017-07-15T15:54:00.080 回答
7

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

已在 Blink/Chrome 中发布了一个补丁，很快就会提供，请参阅http://code.google.com/p/chromium/issues/detail?id=311080。

于 2013-12-13T13:13:09.753 回答
5

它不能通过 outerHTML 访问，因为 SVG 不是 HTML——它是一个单独的XML 规范。

这就是为什么，例如，该示例中的 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/

于 2013-09-16T16:02:36.790 回答
1

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

function wrappedHtml(elt){
    var wrapped = elt.wrap("<wrap></wrap>").parent().html();
    elt.unwrap();
    return wrapped;
}
于 2017-03-15T12:30:39.193 回答