獲取SVG中g(shù)標簽的寬度高度及位置坐標
1. 問題的出現(xiàn)
對于普通的HTML元素赞赖，有很多獲得其寬度width、高度height报慕、距左left畜侦、距頂top等屬性的方法：
類似offsetWidth，clientWidth,width之類的掐场，通過查看DOM元素的屬性可以一探究竟：
然而當遇到SVG的g標簽的時候往扔，卻碰到問題了：
明明在開發(fā)者工具中可以顯示的寬高贩猎、位置坐標等屬性，通過原有的offsetWidth瓤球，ClientWidth獲得值卻為undefined:
這說明融欧，普通的DOMElenment中的方法不適用與SVG敏弃，而SVGDocumentElement(SVG文檔元素)中并沒有相應(yīng)的屬性卦羡。
2. 解決方法
有幸，谷爸度娘大法好(前提你要用英文搜索)
有如下兩個方法可以獲得我們需要的東西麦到，并且全部為JS原生方法：
2.1 getBBox()
首先我們用 SVGElement.getBBox() 的方法來試試看：
<svg width="100%" height="100%" viewBox="0 0 150 360"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="filter1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="Gau1"/>
<feComposite in="Gau1" in2="Gau1" result="Com1" operator="in"/>
<feComposite in="Com1" in2="Gau1" operator="in"/>
</filter>
<g id="g1">
<circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)"></circle>
<circle cx="50" cy="50" r="6" fill="RGB(110,239,10)"></circle>
</g>
</svg>
用方法document.getElementById("g1").getBBox();得到如下對象
2.2 getBoundingClientRect()
SVG代碼還是如上绿饵，用document.getElementById("g1").getBoundingClientRect();的方法，獲得另一個對象：
3. 疑點解釋及總結(jié)
通過比較發(fā)現(xiàn)兩個方法得到的兩組對象的數(shù)值并不一樣瓶颠，不難發(fā)現(xiàn)原因為：
getBBox() 獲得的為元素在當前SVG坐標中的數(shù)據(jù)拟赊，而 getBoundingClientRect 則是獲取了了瀏覽器坐標中的數(shù)據(jù)(因為SVG標簽中的ViewBox屬性影響，實際渲染在瀏覽器中的大小及位置是經(jīng)過偏移和縮放的)粹淋。
兩個方法的作用不僅局限在SVG元素中吸祟，童鞋們不妨試試在其他元素和特定環(huán)境中的奇妙運用。
