之前普通dom節(jié)點(diǎn)用jquery來(lái)寫(xiě)痪署，svg之類(lèi)的節(jié)點(diǎn)操作用d3.js來(lái)寫(xiě)陈症，然后現(xiàn)在嘗試寫(xiě)一個(gè)小組件叉寂，就想寫(xiě)個(gè)不依賴(lài)任何庫(kù)的版本。
之前用d3.js來(lái)寫(xiě)可視化組件翁逞，有著庫(kù)依賴(lài)的問(wèn)題肋杖，這次想自己把庫(kù)的依賴(lài)去掉，用原生態(tài)javascript寫(xiě)挖函。
然后第一件事情我就懵逼了状植，用jquery的$("<svg></svg> )生成也是一樣。
var svg = document.createElement("svg");
document.querySelector("body").appendChild(svg);
然后出來(lái)的是一個(gè)普通標(biāo)簽名叫svg的標(biāo)簽怨喘，沒(méi)有svg的任何渲染
而本來(lái)應(yīng)該是下圖的效果的津畸。
然后就順便普及了svg的知識(shí)，svg雖然和dom元素很像必怜，但是實(shí)際上是xml肉拓，它比html更加嚴(yán)格，有著自己的命名空間梳庆，如果你在html里面直接寫(xiě)暖途，那么會(huì)被加上命名空間解析，如果你想要用js來(lái)創(chuàng)建膏执，那么你就得自己來(lái)寫(xiě)驻售。
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
我寫(xiě)的是一個(gè)詞云插件，我的算法是根據(jù)一個(gè)text來(lái)判斷碰撞與否更米，所以我要知道兩個(gè)text的位置和高度和寬度欺栗。
對(duì)于普通的元素，可以通過(guò)jquery.css("width")來(lái)實(shí)現(xiàn)，但是這個(gè)對(duì)于svg元素迟几，jquery也再一次失效消请。而這個(gè)時(shí)候，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);
