google-chrome - Chrome 问题 SVG 转换

Question

我正在尝试使用 transfrom=translate() 定位一个 svg 矩形。 当我测试它时，我发现它在 Chrome 中不起作用，但在 Firefox 中运行良好。

我也尝试在 Chrome 中使用 -webkit- 但也不起作用。

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

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

<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>

https://jsfiddle.net/suf2reee/

Answer 1

我认为这是 SVG 1.1 与 SVG 2 的对比问题。在浏览器普遍支持的 SVG 1.1 版本中，transform属性对 <svg> 无效元素。它在 SVG 2 中是允许的。

Firefox 已经开始实现一些 SVG 2 功能，而 Chrome 还没有。

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