Question

我有一个基本上看起来像这样的javascript变量：

my_svg_image = '<circle cx="227.58331298828125" cy="102" r="3" style="fill:black;stroke-width:0" />';

它是从我的数据库加载的。有没有办法可以解析该字符串并使用Javascript将其添加到DOM？我有svgweb设置，但看不出我怎么能解析这个字符串。是否有其他图书馆可能有所帮助？

Answer 1

你试过javascript的innerHTML属性吗？

编辑：您只能对html元素使用innerHTML属性，因此您可以使用包含整个svg图像的字符串将其添加到html元素。但是你不能将svg元素添加到现有的svg元素中。

示例：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
   <head>
      <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
   <script type="text/javascript">
   <![CDATA[    
    function test() {
        var newsvg = document.getElementById("svg-wrapper");
        var svgstr = '<svg:svg height="300" width="700" id="svg-container"><svg:circle cx="150px" cy="100px" r="30px" /></svg:svg>';
        newsvg.innerHTML = svgstr;
    }   
   ]]>
   </script>
   <title>SVG DOM</title>
 </head>
 <body>
    <div id="svg-wrapper"></div>
    <input type="button" onclick="javascript:test();" value="generate svg"/><br/>
 </body>
 </html>

如果要向现有的内联SVG添加一个圆，则必须使用DOM方法添加它（并且可能首先解析字符串以提取所需的属性值）。

Answer 2

我最近在寻找与此类似的东西，但我需要更新现有SVG的一部分，所以使用innerHTML并不是我的选择。我最后看看Canvg是如何把它拉下来的，然后想出了这个：

var $contentToReplace = $('svg .some-class');
$contentToReplace.empty();

var content = new DOMParser().parseFromString(newContent, 'text/xml');

// content.children is an HTMLCollection, so using Array.prototype.slice to make a copy. if you
// don't make a copy, items will be removed from content.children each time appendChild is called,
// which will mess up the loop iteration
var children = Array.prototype.slice.call(content.children);
for (var i = 0; i < children.length; i++) {
  $contentToReplace.get(0).appendChild(children[i]);
}

您可以在Canvg查看他们是如何做到的 - 只需搜索parseXml方法。

您还可以将不同的MIME types传递给parseFromString方法。这些浏览器支持有所不同 - 例如，＆＃39; image / svg + xml＆＃39; IE9或更早版本不支持MIME类型。

更改MIME类型只会更改您获取的文档类型。使用＆＃39; text / xml＆＃39;返回一个XMLDocument，在这种情况下似乎工作正常。

将SVG字符串推入Dom？

2 个答案: