首頁猿問如何用 JS 獲取 SVG 內(nèi)...

如何用 JS 獲取 SVG 內(nèi) path 元素中的圖形的實際位置及尺寸

JavaScript

桃花長相依 2019-03-15 15:10:54

查看完整描述

2 回答

慕碼人8056858

TA貢獻1803條經(jīng)驗獲得超6個贊

用 JS 獲取 SVG 內(nèi) path 元素中的圖形的實際位置及尺寸的方法:
1、使用getElementById獲取svg節(jié)點對象：
var el = document.getElementById("yourElement");
2、調(diào)用getBoundingClientRect獲取path的邊界矩形的位置：
var rect = el.getBoundingClientRect();
3、分別獲取width和height屬性就得到實際位置了。

console.log( rect.width );
console.log( rect.height);

反對回復(fù) 2019-03-18

繁華開滿天機

TA貢獻1816條經(jīng)驗獲得超4個贊

　可以通過獲取g標(biāo)簽的第一個子節(jié)點，用它的x,y坐標(biāo)?；蛘甙裧標(biāo)簽換成svg標(biāo)簽，這樣可以獲取x,y的坐標(biāo)值。
　　<svg >
　　<svg id="g1" x=20 y=20>
　　<rect id="1"></rect>
　　<rect id="2"></rect>
　　<rect id="3"></rect>
　　</svg>
　　<svg >
　　document.getElementById("g1").x.animVal.value;