Question

我无法找到适合Firefox中的错误的解决方法。在SVG中的一行上进行变换缩放时会发生错误。

我希望能够指定在变换中更改线条的长度，以便我可以使用css为变换的过渡设置动画。在Firefox中，执行变换缩放会导致行移位。我尝试过使用transform-origin属性来查看是否可以重新定位它，但是没有找到任何有用的值。

这是呈现问题的html代码。适用于Safari和Chrome，而不适用于Firefox：

<!DOCTYPE html>

<html>

  <head>
    <title>Firefox Bug</title>
    <meta charset="utf-8" />
  </head>

  <body>
    <svg width="600" height="600" style="border: solid blue 1px;" viewBox="290 290 20 20">
      <g style="transform: translate(300px, 300px)">
        <path d="M -1 0 L 1 0" stroke="blue" stroke-width="1" style="transform: scale(1, 1);"/>
        <path d="M -1 0 L 1 0" stroke="red" stroke-width="1" />
      </g>
    </svg>
  </body>
</html>

以下是Safari / Chrome中的问题：

这是Firefox中的样子：

红线部分应完全覆盖蓝色，但在Firefox中，蓝色部分会移到侧面。已经在bugzilla中提交了bug。如果有人为此做了一个很好的解决方法，我会喜欢它，让我在不改变线条的情况下使用scale属性。

firefox

0 个答案: