Chrome发行SVG转换 [英] Chrome issue SVG transform

问题描述

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

我也尝试过使用-webkit的Chrome，也不能用。

在代码片段中，您可以看到当Chrome打开时出现什么问题。

<有没有人现在有解决这个或我做错了什么？

< svg transform =翻译（100,0）> < rect width =200height =200style =fill：blue ;; stroke：black/>< / svg>< br>< br>< svg style =transform：translate （100像素，0）> < rect width =200height =200style =fill：blue ;; stroke：black/>< / svg>

https://jsfiddle.net/我认为这是一个SVG 1.1 vs SVG 2的问题。在SVG 1.1（浏览器通常支持的版本）中， transform 属性对于< svg> 元素。在SVG 2中允许使用 。

Firefox已经开始实施一些SVG 2功能，而Chrome并没有这么做。

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

I'm trying to position a svg rectangle with transfrom=translate(). When I tested it, I saw that it doesn't work in Chrome but works nice in Firefox.

I also tried in Chrome with -webkit- but doesn't work either.

In the code snippet you can see whats the problem when its open with Chrome.

Does anyone now a workaround for this or am I doing something wrong?

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

解决方案

I think this is a SVG 1.1 vs SVG 2 issue. In SVG 1.1, which is the version that browsers generally support, the transform attribute was not valid for the <svg> element. It is allowed in SVG 2.

Firefox have started implementing some SVG 2 features, whereas Chrome is not so far along.

The simplest solution is just to put your transform on the <rect>.

这篇关于Chrome发行SVG转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！