SVG纯文本怎样解析回SVG的DOM形式

Question

问题是这样的，在前端向服务器请求回一段文本，样子如下：
<g>
<g>
<g>
<path fill="#D8C29C" d="M151.845,175.092c3.113,0.04,7.235,1.666,6.306,5.561c-0.297,1.247-1.966,0.883-2.728,0.375
c-0.726-0.485-0.793-1.539-0.764-2.316c0.053-1.404,0.89-3.07-0.087-4.297c-0.376-0.473-2.233,0.187-1.802,0.728
c0.772,0.97,0.059,2.708-0.035,3.84c-0.078,0.941,0.066,1.814,0.66,2.564c1.155,1.461,4.461,1.184,5.759,0.096
c1.778-1.491,1.079-4.186-0.38-5.655c-1.539-1.549-4.085-1.873-6.153-1.899C151.957,174.08,150.543,175.075,151.845,175.092
L151.845,175.092z"/>
</g>
</g>
<g>
<g>
<path fill="#D8C29C" d="M152.643,184.974c1.868,2.407,5.905,1.827,7.665-0.441c0.19-0.246-0.718-0.136-0.757-0.128
c-0.36,0.069-0.901,0.184-1.141,0.494c-1.127,1.453-2.838,0.842-3.835-0.441C154.238,184.022,152.547,184.851,152.643,184.974
L152.643,184.974z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="#C35252" d="M152.233,174.59c3.25,0,7.063,1.188,7,5.188c-0.063,2.063-2,2.5-3.75,2.063
c-2.25-0.563-1.875-2.875-1.563-4.625c0.125-0.75,0.375-1.875-0.25-2.438"/>
</g>
<g>
<defs>
<path id="SVGID_1_" d="M152.233,174.59c3.25,0,7.063,1.188,7,5.188c-0.063,2.063-2,2.5-3.75,2.063
c-2.25-0.563-1.875-2.875-1.563-4.625c0.125-0.75,0.375-1.875-0.25-2.438"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_"  overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_)" fill="#DC8F8F" d="M152.233,181.994c0,0,5.017-7.226,9.101-4.776c4.083,2.45,0,4.972,0,4.972
L152.233,181.994z"/>
</g>
</g>现在要把这段text形式的文本，解析成为一个DOM结构的样子，求原生态的思路或者方法。 text转化为DOM

Answer 1

   var html = '<g>\
<g>\
<g>\
<path fill="#D8C29C" d="M151.845,175.092c3.113,0.04,7.235,1.666,6.306,5.561c-0.297,1.247-1.966,0.883-2.728,0.375\
c-0.726-0.485-0.793-1.539-0.764-2.316c0.053-1.404,0.89-3.07-0.087-4.297c-0.376-0.473-2.233,0.187-1.802,0.728\
c0.772,0.97,0.059,2.708-0.035,3.84c-0.078,0.941,0.066,1.814,0.66,2.564c1.155,1.461,4.461,1.184,5.759,0.096\
c1.778-1.491,1.079-4.186-0.38-5.655c-1.539-1.549-4.085-1.873-6.153-1.899C151.957,174.08,150.543,175.075,151.845,175.092\
L151.845,175.092z"/>\
</g>\
</g>\
<g>\
<g>\
<path fill="#D8C29C" d="M152.643,184.974c1.868,2.407,5.905,1.827,7.665-0.441c0.19-0.246-0.718-0.136-0.757-0.128\
c-0.36,0.069-0.901,0.184-1.141,0.494c-1.127,1.453-2.838,0.842-3.835-0.441C154.238,184.022,152.547,184.851,152.643,184.974\
L152.643,184.974z"/>\
</g>\
</g>\
</g>\
<g>\
<g>\
<path fill="#C35252" d="M152.233,174.59c3.25,0,7.063,1.188,7,5.188c-0.063,2.063-2,2.5-3.75,2.063\
c-2.25-0.563-1.875-2.875-1.563-4.625c0.125-0.75,0.375-1.875-0.25-2.438"/>\
</g>\
<g>\
<defs>\
<path id="SVGID_1_" d="M152.233,174.59c3.25,0,7.063,1.188,7,5.188c-0.063,2.063-2,2.5-3.75,2.063\
c-2.25-0.563-1.875-2.875-1.563-4.625c0.125-0.75,0.375-1.875-0.25-2.438"/>\
</defs>\
<clipPath id="SVGID_2_">\
<use xlink:href="#SVGID_1_"  overflow="visible"/>\
</clipPath>\
<path clip-path="url(#SVGID_2_)" fill="#DC8F8F" d="M152.233,181.994c0,0,5.017-7.226,9.101-4.776c4.083,2.45,0,4.972,0,4.972\
L152.233,181.994z"/>\
</g>\
</g>';
var svg = document.createElement('svg');
svg.innerHTML = html;
console.log(svg);不知道这样是不是你想要的结果。