Question

我试图用transfrom = translate（）来定位一个svg矩形。当我测试它时，我发现它在Chrome中不起作用，但在Firefox中运行良好。

我还尝试在Chrome中使用-webkit-但是也没有。

在代码段中，您可以看到使用Chrome打开时的问题。

现在有人为此解决了这个问题，还是我做错了什么？

＆＃13;

<svg transform="translate(100,0)">
  <rect width="200" height="200" style="fill:blue;;stroke:black" />
</svg>
<br><br>
<svg style="transform:translate(100px,0)">
  <rect width="200" height="200" style="fill:blue;;stroke:black" />
</svg>

＆＃13;

https://jsfiddle.net/suf2reee/

Answer 1

我认为这是一个SVG 1.1 vs SVG 2问题。在SVG 1.1（浏览器通常支持的版本）中，transform属性对<svg>元素无效。 SVG 2中允许。

Firefox已经开始实现一些SVG 2功能，而Chrome目前并不是这样。

最简单的解决方案就是将您的转换放在<rect>。

上

Chrome问题SVG转换

1 个答案: