svg bbox() 总是返回一个值，其中 x 和 y 不应该为 0

Question

我正在使用 SVG.js 来绘制形状。其中一个形状需要是带有半径线的圆形，所以要获得这种行为，我在“g”元素内使用椭圆和线。

问题是，每当我引用那个 g 元素并尝试获取 bbox 时，我总是得到这样的值：

{
 x: 0, 
 y: 0, 
 width: widthOfBox, 
 height: heightOfBox, 
 cx: widthOfBox/2, 
 cy: heightOfBox/2
}

x 和 y 不应为 0。

下面是有问题的元素，它显然不在 (0,0) 但似乎报告它是。

<g id="MLG1008" stroke="#000000" stroke-width="2" fill="#000000" transform="translate(100 200)" width="993.3559281546569" height="993.3559281546569" x="12.963409423828125" y="-290.0365905761719">
    <ellipse id="MLEllipse1009" rx="496.67796407732845" ry="496.67796407732845" cx="496.67796407732845" cy="496.67796407732845" stroke="#000000" stroke-width="2"></ellipse>
    <line id="MLLine1010" x1="496.67796407732845" y1="496.67796407732845" x2="801.6779640773284" y2="888.6779640773284" stroke="#000000" stroke-width="2"></line>
</g>

有没有办法定义 bbox 应该具有的值？或者设置 bbox() 查看的值的方法？

Answer 1

来自W3 specs on getBBox

SVGRectgetBBox()
在所有包含的图形元素的几何图形上返回当前用户空间中的紧密边界框（即，在应用“transform”属性后，如果有的话），不包括描边、剪切、遮罩和过滤效果）。 [...]

^强调我的

正如您在此定义中看到的，getBBox 返回的 SVGRect 是根据包含的图形元素计算的，这意味着您在 @ 上应用的翻译987654325@ 元素不会在此 SVGRect 中考虑，因为转换是应用于元素本身，而不是应用于其图形内容。

您可以通过将转换后的<g> 元素包装在另一个<g> 中来获取这些x 和y 值，您可以从中调用它的getBBox() 方法，

console.log(document.getElementById("wrapper").getBBox());

<svg viewBox="0 0 1500 1500" width="300" height="300">
  <g id="wrapper">
    <g id="MLG1008" stroke="#000000" stroke-width="2" fill="#000000" transform="translate(100 200)">
        <ellipse id="MLEllipse1009" rx="496.67796407732845" ry="496.67796407732845" cx="496.67796407732845" cy="496.67796407732845" stroke="#000000" stroke-width="2"></ellipse>
        <line id="MLLine1010" x1="496.67796407732845" y1="496.67796407732845" x2="801.6779640773284" y2="888.6779640773284" stroke="#000000" stroke-width="2"></line>
    </g>
  </g>
</svg>

甚至在父<svg> 上，如果它的所有图形元素都在这个<g> 内：

console.log(document.querySelector("svg").getBBox());

<svg viewBox="0 0 1500 1500" width="300" height="300">
  <g id="MLG1008" stroke="#000000" stroke-width="2" fill="#000000" transform="translate(100 200)">
      <ellipse id="MLEllipse1009" rx="496.67796407732845" ry="496.67796407732845" cx="496.67796407732845" cy="496.67796407732845" stroke="#000000" stroke-width="2"></ellipse>
      <line id="MLLine1010" x1="496.67796407732845" y1="496.67796407732845" x2="801.6779640773284" y2="888.6779640773284" stroke="#000000" stroke-width="2"></line>
  </g>
</svg>

---

另外，即使与您的问题无关，请注意<g> 元素没有width、height、x 或y 属性。

Answer 2

因为您的 <g> 相对于 <svg> 定位。您需要使用transform="translate(x, y)" 来更改元素位置。