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 vs SVG 2问题.在SVG 1.1中,这是浏览器通常支持的版本,该transform属性对该<svg>元素无效.它是允许SVG 2.

Firefox已经开始实现一些SVG 2功能,而Chrome并没有这么做.

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