Question

我使用SVG.js绘制形状。其中一个形状需要是一个带有半径线的圆形，所以要得到这种行为，我使用椭圆和一条线在一个＆＃34; g＆＃34;元件。

麻烦的是，每当我引用那个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

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

^强调我的

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

您可以将已转换的x元素包含在另一个y中，并将其称为<g>方法，从而获得这些<g>和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属性。< / p>

Answer 2

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

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

2 个答案: