Chrome 问题 SVG 转换答案

【问题标题】：Chrome issue SVG transformChrome 问题 SVG 转换
【发布时间】：2016-10-09 21:38:12
【问题描述】：

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

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

在代码 sn-p 中，您可以看到使用 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/

【问题讨论】：

我认为这可能与 MathML 支持有关。事实上，如果您查看转换属性 MDN 文档页面，它会在您使用 CSS 回退时向您发出警告，如您在此处看到的：prntscr.com/be7w0z（左 firefox，右 chrome）。但是，如果您将变换应用于矩形而不是 svg 对象，它将按预期工作：jsfiddle.net/suf2reee/1

标签： google-chrome firefox svg transform

【解决方案1】：

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

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

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

【讨论】：

是的@Paul LeBeau，我也遇到过类似的问题，效果很好。