svg - 转型 element in SVG behaves differently in Chrome, Firefox

Question

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

<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 不受支持的部分？据报道， 2017 年初有一个旧错误已修复，所以我认为我遗漏了一些关于 SVG 转换应该工作的方式。

标签： svg

Answer 1

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

如果<svg>用 a 包裹元素<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>

顺便说一句，您引用的错误不适用。乍一看并不容易，但随附的测试用例表明这是指<g>通过脚本在元素上设置转换。