OuterHTML элемента SVG

Ответ 1

Он недоступен через outerHTML, потому что SVG не является HTML - это отдельная спецификация XML.

Вот почему, например, ваш svg node в этом примере имеет собственное пространство имен (xmlns="http://www.w3.org/2000/svg).

Ваш пример может быть наиболее целесообразным для одноразового запроса, но на самом деле его можно копать в использовании собственных атрибутов. Это займет немного больше работы.

Пусть используется связанный образец node:

 <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"

Если вы хотите извлечь фактическое содержимое, выполните итерацию по дочерним элементам. Как и в предыдущем случае, нетекстовая коллекция node 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/

Ответ 2

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

Ответ 3

Обновление 2013: innerHTML и outerHTML также будут поддерживаться для элементов svg, в соответствии с спецификацией DOM Parsing.

Патч для этого был приземлен в Blink/Chrome и скоро станет доступен, см. http://code.google.com/p/chromium/issues/detail?id=311080.

Ответ 4

Используя jQuery, вы можете легко создать временную оболочку HTML вокруг любого элемента, который не поддерживает outerHTML:

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

Ответ 5

Это более легкое решение, и оно отлично работает в FF, Chrome, IE. Честь отправляется в Филипп Wrann.

outerHtml не работает в IE

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