概述
如何用js动态插入svg?如何在svg中在插入Dom元素?
最近遇到了这个问题,于是好好研究了一番。有这么一篇文章,可以关注。解释的很清楚。
http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element
粘出里面的关键代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
<svg id="s" xmlns="http://www.w3.org/2000/svg"/>
<script type="text/javascript">
function makeSVG(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
document.getElementById('s').appendChild(circle);
circle.οnmοusedοwn= function() {
alert('hello');
};
</script>
</body></html>
<script type="text/javascript"><![CDATA[
function parseSVG(s) {
var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
var frag= document.createDocumentFragment();
while (div.firstChild.firstChild)
frag.appendChild(div.firstChild.firstChild);
return frag;
}
document.getElementById('s').appendChild(parseSVG(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert('hello');"/>'
));
]]></script>
大致意思是,svg是xml格式的语言,就算在dom里看上去已经加上了,但是还是不能被识别出来的。
只能曲线救国。
最后
以上就是平常仙人掌为你收集整理的如何用js动态插入svg?如何在svg中在插入Dom元素的全部内容,希望文章能够帮你解决如何用js动态插入svg?如何在svg中在插入Dom元素所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复