SVG中的转换<svg>元素在Chrome，Firefox中的行为有所不同

Question

我有一个相当简单的SVG，已将其转换为SSCCE。这是SVG（以及您自己可以看到的fiddle）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <rect id="leader" width="100%" height="100%" stroke="red" fill="none" />

  <svg id="left" x="5%" y="5%" width="40%" height="85%">
    <rect width="100%" height="100%" fill="blue"/>
  </svg>

  <svg id="left" x="55%" y="5%" width="40%" height="85%" transform="scale(.5)">
    <rect width="100%" height="100%" fill="red"/>
  </svg>
</svg>

我期望有一个大的，空的红色矩形，其中包含两个较小的矩形：一个蓝色的矩形占用相当大的空间，另一个蓝色的（红色）矩形则占蓝色的一半。也有翻译，但这对这个问题并不十分重要。

在Firefox中，我得到了预期的图像，即：

但是，当我在Chrome（或Safari）中查看同一张图片时，似乎忽略了我的转换，并且两个矩形的尺寸都相同：

我的SVG是否有问题，是这两个浏览器中的一个错误，还是Chrome / Safari中SVG不受支持的一部分？据报道有一个old bug from early 2017是固定的，所以我在想关于SVG转换应该工作的方式的信息。

Answer 1

仅为SVG 2引入了transform元素的<svg>属性。目前，并非所有浏览器都支持它。 （在根元素上设置version属性无效。）

如果用<svg>包装<g>元素并在那里定义转换，则可以实现相同的效果。定位的百分比值仍将相对于建立视口的最近父元素，即外部<svg>。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="leader" width="100%" height="100%" stroke="red" fill="none" />

  <svg id="left" x="5%" y="5%" width="40%" height="85%">
    <rect width="100%" height="100%" fill="blue"/>
  </svg>

  <g transform="scale(.5)">
    <svg id="left" x="55%" y="5%" width="40%" height="85%">
      <rect width="100%" height="100%" fill="red"/>
    </svg>
  </g>
</svg>

您引用的错误，顺便说一句，不适用。乍看之下并不容易，但是所附的test case显示这是指通过脚本在<g>元素上设置转换。