This question already has an answer here:
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?
As per http://www.w3.org/TR/SVG/struct.html#SVGElement transforms are not allowed on SVGSVGElement.
来源:https://stackoverflow.com/questions/33058883/nested-svg-ignores-transformation-in-chrome-and-opera