嵌套 svg 忽略 Chrome 和 Opera 中的转换

Question

我经历了一些我称之为错误的经历。我有以下 2 svg:

<svg height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1004">
  <defs id="SvgjsDefs1005"></defs>
  <g transform="matrix(2,0,0,2,50,50)" id="SvgjsG1011">
    <rect height="50" width="50" id="SvgjsRect1012"></rect>
  </g>
</svg>

<svg height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1004">
  <defs id="SvgjsDefs1005"></defs>
  <svg transform="matrix(2,0,0,2,50,50)" style="overflow: visible;" id="SvgjsSvg1011">
    <rect height="50" width="50" id="SvgjsRect1012"></rect>
  </svg>
</svg>

在 Firefox 中，这两个片段看起来一样（正如预期的那样）。两者之间的唯一区别是第二个使用嵌套 svg 而不是组。

当您在 chrome 或 Opera 中查看此示例时，您会发现嵌套 svg 上的转换完全被忽略了。

有人对此行为有解释吗？

Answer 1

根据 http://www.w3.org/TR/SVG/struct.html#SVGElement SVGSVGElement 不允许转换。

嵌套 svg 忽略 Chrome 和 Opera 中的转换

nested svg ignores transformation in Chrome and Opera

javascript

svg

cross-browser

svg.js