將SVG字符串推入Dom？
[英]Push SVG String into Dom?
問題描述
我有一個基本上看起來像這樣的javascript變量：
my_svg_image = '<circle cx="227.58331298828125" cy="102" r="3" style="fill:black;stroke-width:0" />';
它是從我的數據庫加載的。 有沒有辦法可以解析該字符串並使用Javascript將其添加到DOM？ 我有svgweb設置，但看不出我怎么能解析這個字符串。 是否有其他圖書館可能有所幫助？
2 個解決方案
解決方案1
3 2010-06-16 05:47:33
你試過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方法添加它（並且可能首先解析字符串以提取所需的屬性值）。
解決方案2
1 2014-09-27 03:48:20
我最近在尋找類似的東西，但我需要更新現有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類型傳遞給parseFromString方法。 雖然瀏覽器支持有所不同 - 例如，IE9或更早版本中不支持'image / svg + xml'MIME類型。
更改MIME類型只會更改您獲取的文檔類型。 使用'text / xml'返回一個XMLDocument，在這種情況下似乎工作正常。
將SVG字符串附加到dom
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.