js獲取svg中g元素的寬高

2021-09-19 11:23:31 字數 470 閱讀 2991

這裡有乙個g元素：

...
此時的g元素沒有賦值寬高，因此它的寬高完全由它的內容撐起來的，這個時候我們想獲得它的寬高該怎麼辦呢，使用jquery的width(),height(),css('width'),css('height')都不能獲得它的寬高，其實js自帶的有乙個獲取g元素寬高，位置的方法，使用：

var g = document.getelementbyid("g_main").getbbox(); //獲取g元素的寬高屬性


console.log(g);
在瀏覽器中console出來的為這樣乙個陣列：

這樣就可獲得該g元素的寬高，x,y則是相對於它父級的x軸，y軸的位置，單位都是px

js怎麼獲取元素的寬高

第一種情況就是寬高都寫在 樣式表裡，就比如 div1。這中情況通過 div1.style.width拿不到寬度，而通過 div1.offsetwidth 才可以獲取到寬度。第二種情況就是寬和高是寫在 行內中，比如style width 120px 這中情況通過上述2個方法都能拿到寬度。小結，因為id...

如何獲取SVG中g標籤的寬高及位置座標

對於普通的html元素，有很多獲得其寬度width 高度height 距左left 距頂top等屬性的方法 類似offsetwidth，clientwidth,width之類的，通過檢視dom元素的屬性可以一 竟 然而當遇到svg的g標籤的時候，卻碰到問題了 明明在開發者工具中可以顯示的寬高 位置座...

獲取元素寬高

獲取元素寬高值 1.內聯樣式.element.style讀取的只是元素內聯樣式,即寫在元素的 style 屬性上的樣式,支援讀寫.var elebox document.getelementbyid eleid var h elebox.style.height 外聯樣式 巢狀樣式無法通過上述方法直...