在svg中用js创建新元素并添加成功，却无法显示（SVG开发实践）_IT百科

首先1处改成node=svgdoc.createElementNS('http://www.w3.org/2000/svg', 'rect')是必须的，这样才能创建一个svgRect元素。

其次，IE8不支持svg。IE9以上在运行这个文件的时候会屏蔽动态内容，在页面下方会有提示，点击允许就行了。火狐和chrome可以直接运行这个文件。

之前普通dom节点用jquery来写，svg之类的节点 *** 作用d3.js来写，然后现在尝试写一个小组件，就想写个不依赖任何库的版本。

之前用d3.js来写可视化组件，有着库依赖的问题，这次想自己把库的依赖去掉，用原生态javascript写。

然后第一件事情我就懵逼了，用jquery的 $("<svg></svg>) 生成也是一样。

然后出来的是一个普通标签名叫svg的标签，没有svg的任何渲染

而本来应该是下图的效果的。

然后就顺便普及了svg的知识，svg虽然和dom元素很像，但是实际上是xml，它比html更加严格，有着自己的命名空间，如果你在html里面直接写，那么会被加上命名空间解析，如果你想要用js来创建，那么你就得自己来写。

我写的是一个词云插件，我的算法是根据一个text来判断碰撞与否，所以我要知道两个text的位置和高度和宽度。

对于普通的元素，可以通过jquery.css("width")来实现，但是这个对于svg元素，jquery也再一次失效。而这个时候，getBoundingClientRect()，就起效了。

<html>

<head>

<title>Insert title here</title>

function load() {

var embedTag = document.createElement('embed')

embedTag.type = "image/svg+xml"

embedTag.width = "640"

embedTag.height = "480"

embedTag.onload = function() {

alert(embedTag.getSVGDocument())

}

embedTag.src = "test.svg"

document.body.appendChild(embedTag)

}

</script>

</head>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

在svg中用js创建新元素并添加成功，却无法显示（SVG开发实践）