Question

是否有一种“简便”的DOM方法来获取组的变换位置（中心或原点）和边界框（宽度，高度）？

<g>作为逻辑容器标签，除了其子级使用的transform之外，没有其他几何属性。

let o = document.getElementById("o");
let g = document.getElementById("g");

o.textContent += "rect  x = " + r.x.baseVal.value + "\n";
o.textContent += "group x = " + g.x.baseVal.value + "\n";  // TypeError: g.x is undefined

svg{background-color:#f3f3f3}

<svg viewBox="0 0 200 200" width="200">
<g id="g" transform="translate(100,100)" >
  <rect id="r" width="100" height="100" ></rect>
</g>
</svg>
<div id="o"></div>

因此可能需要迭代所有子项并计算其边界框的总和（包括变换）？

编辑：

以下内容返回组的边界框，没有进行转换：

let o = document.getElementById("o");
let g = document.getElementById("g");

o.textContent += "getBBox().x = " + r.getBBox().x + "\n";
o.textContent += "getBBox().y = " + r.getBBox().y + "\n";
o.textContent += "getBBox().width = " + r.getBBox().width + "\n";
o.textContent += "getBBox().height = " + r.getBBox().height + "\n";

svg{background-color:#f3f3f3}

<svg viewBox="0 0 200 200" width="200">
<g id="g" transform="translate(100,100)" >
  <rect id="r" width="100" height="100" ></rect>
</g>
</svg>
<div id="o"></div>

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox

SVGGraphicsElement.getBBox（）允许我们确定对象适合的最小矩形的坐标。的返回的坐标是相对于当前svg空间的，即在所有元素上应用所有几何属性之后包含在目标元素中。

而且：

返回的值是一个SVGRect对象，它定义了边界框。该值是与任何转换无关属性应用于它或父元素。

访问内联SVG的转换组边界框（x和y位置，宽度和高度）？

1 个答案: