<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100" viewBox="-11 -22 100 100"> <g transform="translate(3, 4)"> <svg x="1" y="2" width="888" height="999"> <g> <svg x="30" y="40" width="100" height="100"> <g id="buggy"/> </svg> <defs> <symbol id="sym" width="100" height="100"> <rect id="symbolRect" width="0" height="0" transform="translate(70, 80)"/> </symbol> </defs> <svg id="inner" x="30" y="40" width="100" height="100"> <g id="g1"/> </svg> <svg id="inner-2" viewBox="0 0 10 10" width="-10" height="10"> <g id="g5"/> </svg> <foreignObject id="fO" x="30" y="40" width="100" height="100" transform="translate(1, 1)"> <!-- current layout implementation ignores x="50" and y="60". thus, I made getCTM and getScreenCTM do the same. --> <svg id="outer" x="50" y="60" width="100" height="100"> <g id="g2" transform="translate(600, 700)"/> </svg> </foreignObject> <foreignObject x="30" y="40" width="100" height="100" transform="translate(1, 1)"> <html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%"> <svg xmlns="http://www.w3.org/2000/svg" id="outer2" width="100" height="100" viewBox="100 100 200 200"/> </html> </foreignObject> <!-- something invalid --> <foreignObject> <g id="g3"/> </foreignObject> <image> <g id="g4"/> </image> <use xlink:href="#sym" id="use"/> </g> </svg> </g> </svg>