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

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

JavaScript

慕虎7371278 2019-05-11 13:07:37

查看完整描述

2 回答

心有法竹

TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊

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

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

反對(duì) 回復(fù) 2019-05-14

萬(wàn)千封印

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊

　可以通過(guò)獲取g標(biāo)簽的第一個(gè)子節(jié)點(diǎn)，用它的x,y坐標(biāo)。或者把g標(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;