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

2021-07-22 16:35:33 字數 1487 閱讀 5818

對於普通的html元素,有很多獲得其寬度width、高度height、距左left、距頂top等屬性的方法:

類似offsetwidth,clientwidth,width之類的,通過檢視dom元素的屬性可以一**竟:

然而當遇到svg的g標籤的時候,卻碰到問題了:

明明在開發者工具中可以顯示的寬高、位置座標等屬性,通過原有的offsetwidth,clientwidth獲得值卻為undefined:

這說明,普通的domelenment中的方法不適用與svg,而svgdocumentelement(svg文件元素)中並沒有相應的屬性。

有幸,谷爸度娘**好(前提你要用英文搜尋)

有如下兩個方法可以獲得我們需要的東西,並且全部為js原生方法:

2.1 getbbox()

首先我們用svgelement.getbbox()的方法來試試看:

用方法document.getelementbyid("g1").getbbox();得到如下物件

svg**還是如上,用document.getelementbyid("g1").getboundingclientrect();的方法,獲得另乙個物件:

通過比較發現兩個方法得到的兩組物件的數值並不一樣,不難發現原因為:

getbbox()獲得的為元素在當前svg座標中的資料,而getboundingclientrect則是獲取了了瀏覽器座標中的資料(因為svg標籤中的viewbox屬性影響,實際渲染在瀏覽器中的大小及位置是經過偏移和縮放的)。

兩個方法的作用不僅侷限在svg元素中,童鞋們不妨試試在其他元素和特定環境中的奇妙運用。

js獲取svg中g元素的寬高

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

獲取canvas的寬高及重置

相信使用canvas製作2d圖畫的程式設計師都遇到過這麼乙個場景,定義好一塊區域,然後在這個區域內繪製圖畫,那麼所繪製的圖畫充滿這個區域,但是因為某些原因,我們要改變canvas的大小,同時改變外部包裹容器的大小。那麼我們怎麼獲取寬高呢?不同於普通dom節點,我們可以使用document.getel...

iOS中實現獲取文字內容的寬高

我們在進行ios開發的過程中,難免會要得到文字內容的寬高。我們可以把實現獲取得到的文字內容的寬高的方法封裝到nsstring類的分類中,在ios開發中也方便直接拿來使用。例如 我們進行即時通訊的聊天功能開發時就會用到ios中tableview,將一段聊天內容顯示在cell中,如圖,紅色框框就是tab...