svg元素的基础操作

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

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

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

var svg = document.createElement("svg");
document.querySelector("body").appendChild(svg);

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

没有渲染效果的svg

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

具有正常渲染的svg标签

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

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

我写的是一个词云插件，我的算法是根据一个text来判断碰撞与否，所以我要知道两个text的位置和高度和宽度。
对于普通的元素，可以通过jquery.css("width")来实现，但是这个对于svg元素，jquery也再一次失效。而这个时候，getBoundingClientRect()，就起效了。

var el   = document.getElementById("yourElement"); // or other selector like querySelector()
var rect = el.getBoundingClientRect(); // get the bounding rectangle
console.log( rect.width );
console.log( rect.height);