1

在 Firefox 53.0.3 中，我注意到将一个带有“viewBox”属性的 SVG 放入另一个 SVG 中的奇怪行为。

以这段代码或这支笔为例。

<svg id="svgroot" height="812" width="1620">

  <svg id="svgcontent" width="696" height="480" x="392" y="117" viewBox="0 0 580 400">
    <g style="pointer-events:none">
      <title style="pointer-events:inherit">background</title>
      <rect width="100%" height="100%" id="canvas_background_fill" fill="red" style="pointer-events:inherit"></rect>
    </g>
  </svg>

</svg>

正如我们所看到的，我们有 #svgcontent ，其中 a 为 696，高度为 480，但如果您检查元素，则宽度为 835，高度为 576。

在 chrome 中，此示例按预期工作。

这是一个Firefox错误还是我做错了什么？

编辑：我注意到另一件事。子 SVG 的内容的宽度和高度与属性值相同。

似乎错误的尺寸值来自：

// 696 * ( 696 / 580 )
// 696 * 1.2
// 835
currentWidth = attributeWidth * ( attributeWidth / viewboxWidth );
4

0 回答 0