我有一个JavaScript变量,基本上是这样的:将SVG字符串插入Dom?
my_svg_image = '<circle cx="227.58331298828125" cy="102" r="3" style="fill:black;stroke-width:0" />';
这是从我的数据库加载。有没有一种方法可以解析该字符串并将其添加到JavaScript的DOM?我有svgweb设置,但没有看到我怎样才能解析这个字符串。还有其他图书馆可能有帮助吗?
我有一个JavaScript变量,基本上是这样的:将SVG字符串插入Dom?
my_svg_image = '<circle cx="227.58331298828125" cy="102" r="3" style="fill:black;stroke-width:0" />';
这是从我的数据库加载。有没有一种方法可以解析该字符串并将其添加到JavaScript的DOM?我有svgweb设置,但没有看到我怎样才能解析这个字符串。还有其他图书馆可能有帮助吗?
你试过了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方法(和prbably第一解析你的字符串中提取所需要的属性值)进行添加。
更具描述性......我应该在什么标签中添加它? – Colin 2010-06-16 16:50:52
我编辑了我的答案,以使用innerHTML清晰器 – 2010-07-05 13:33:48
我最近正在寻找类似的东西,但我需要更新现有的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方法。对这些浏览器的支持有所不同 - 例如,IE9或更早版本不支持'image/svg + xml'MIME类型。
更改MIME类型只会改变您找回的文档类型。使用'text/xml'会返回一个XMLDocument,在这种情况下看起来可以正常工作。
您所指的DOM:它是嵌入式还是嵌入式svg在html中 - 还是独立的svg? – 2010-06-16 06:31:18
对不起,我想用字符串将描述的图像渲染到页面上。 – Colin 2010-06-16 16:45:18