text - テキストとしてDOMに挿入されたsvgのツリーを取得する方法

Question

ajaxを使用して動的に作成したsvgを埋め込みました

$.ajax({
  url: 'file.svg',
  dataType: 'text',
  success: function(svg) {
    var svg = $(svg).appendTo('body');
    var shape = svg.find('g#shape');
    // how to get shape as text.
  }
});

html()jQueryでの作業と同じように、パスが少ないグループなどのsvg Treeをテキストとして取得するにはどうすればよいですか?

Answer 1

XMLSerializer を使用して、ノードをシリアライズできます。このようなもの...

var XMLS = new XMLSerializer(); 
var string = XMLS.serializeToString(node);

Answer 2

私は方法を見つけました。SVG のテキストを返すこのプラグインを作成しました。おそらく、html DOM に埋め込まれた任意の xml で動作します。

$.fn.xml = function() {
    function serialize(node) {
        var i;
        var text = '<' + node.nodeName;
        for(i = 0; i < node.attributes.length; ++i) {
            text += ' ' + node.attributes[i].name + '="' +
                    node.attributes[i].value + '"';
        }
        text += '>';
        if (node.childNodes.length) {
            for (i = 0; i < node.childNodes.length; ++i) {
                if (node.childNodes[i] instanceof Text) {
                    text += node.childNodes[i].wholeText
                } else if (node.childNodes[i] instanceof SVGElement) {
                    text += serialize(node.childNodes[i]);
                }
            }
        }
        return text + '</' + node.nodeName + '>';;
    }
    return serialize(this[0]);   
};