转化<；svg>；SVG中的元素在Chrome和Firefox中的行为不同

我有一个相当简单的SVG，我已经将它转换成了一个。以下是SVG（和一个您可以自己看到的）：

我希望有一个大的、空的红色矩形，其中包含两个较小的矩形：一个蓝色矩形占据了相当大的空间，另一个（红色）是蓝色矩形的一半大小。有一种翻译也会发生，但对于这个问题来说，这并不十分重要

在Firefox中，我得到了预期的图像，如下所示：

但是，当我在Chrome（或Safari）中查看相同的图像时，它似乎忽略了我的转换，并且两个矩形的大小相同：

---

我的SVG是否有问题，这是这些浏览器中的一个错误，还是Chrome/Safari中不支持的SVG部分？有一个被报告为已修复的属性，因此我认为我缺少了SVG转换的工作方式。

元素的

transform

属性仅用于。目前，并非所有浏览器都支持它。（在根元素上设置

version

属性无效。）

如果使用

包装

元素并在其中定义转换，则可以实现相同的效果。定位的百分比值仍将相对于建立视口的最近父元素，即外部

---

元素的

转换

属性仅为引入。目前，并非所有浏览器都支持它。（在根元素上设置

version

属性无效。）

如果使用

包装

元素并在其中定义转换，则可以实现相同的效果。定位的百分比值仍将相对于建立视口的最近父元素，即外部

感谢您的解释和解决方法。在我想尝试的浏览器中效果非常好：）谢谢你的解释和解决方法。在我想尝试的浏览器中效果非常好：）

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