nested svg ignores transformation in Chrome and Op

2020-05-03 10:12发布

This question already has answers here:

SVG translate seems to behave different in Chrome/Chromium (2 answers)

I experienced somewhat that I would call a bug. I have the following 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>

In firefox this two snippets look the same (as expected). The only difference between the two is that the second uses nested svg instead of a group.

When you view this example in chrome or opera you will see, that the transformation on the nested svg is comepletely ignored.

Does ANYONE has an explanation for this behavior?