如何将 svg 树作为文本插入 DOM

Posted 2023-02-24

【中文标题】如何将 svg 树作为文本插入 DOM

【英文标题】：How to get tree of svg inserted to the DOM as text

【发布时间】：2013-06-13 07:46:17

【问题描述】：

我已经嵌入了我使用 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.
  
);

我怎样才能获得 svg Tree，例如在 jQuery 中使用与 html() 相同的文本路径很少的组？

【参考方案1】：

您可以使用 XMLSerializer 序列化节点。像这样的...

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

【参考方案2】：

根据您的浏览器，它可以使用两个序列化程序之一：

function xmltostring(domElem)  // Input the NODE of the DOM element
  if (window.XMLSerializer)  // FF, Chrome, IE10 has an internal serializer
    var XMLS = new XMLSerializer();
    var xmlString = XMLS.serializeToString(domElem);
   else if (window.ActiveXObject)  // IE9 uses ActiveX
    var xmlString = domElem.xml;
  
  return xmlString;

注意：也适用于 Safari。 IE8 及以下无法原生处理 SVG（需要插件），未使用此功能进行测试。

【参考方案3】：

我找到了一种方法，我编写了这个返回 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]);   
;