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

来自getbbox上的W3规格

svgrect getBbox（）
返回当前用户空间中的紧密边界框（即，在应用"转换"属性（如果有）之后），在所有的几何形状上包含的图形元素 ，不包括抚摸，剪切，掩盖和过滤效果）。[...]

^强调矿山

您在此定义中可以看到，getBBox返回的SVGRECT是根据包含的图形元素 的，这意味着您应用于<g>元素的翻译将会在此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 NOR y属性。

Answer 2

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

Answer 3

我也有类似的情况：

1. 您添加Settimerout正在工作。2：我删除getBbox（）并替换getAttribute（X＆quot;）//x，y，width，高度