D3 Examples - Static SVG Aspect ratio problem

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
 <head>
   <title>Aspect Ratio</title>
​
   </style>
 </head>
 <body>
​
     <div id="chart">
    <svg width="400" height="400" viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet" id="charts">
        <rect width="200" height="200" transform="translate(100,100)" fill="#00ff00" fill-opacity="0.8" stroke="#000" stroke-width="5" stroke-opacity="0.6"></rect>
        <circle cx="100" cy="100" r="20" stroke="none" fill="#ff0000" fill-opacity="0.6"></circle>
    </svg> 
    <svg width="300" height="300" viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet" id="charts">
        <rect width="200" height="200" transform="translate(100,100)" fill="#00ff00" fill-opacity="0.8" stroke="#000" stroke-width="5" stroke-opacity="0.6"></rect>
        <circle cx="100" cy="100" r="20" stroke="none" fill="#ff0000" fill-opacity="0.6"></circle>
    </svg> 
     
     </div>
​
    <script type="text/javascript">
 
        svgs = document.getElementsByTagName("svg");
        console.log(svgs);
        svg_good = svgs[0];
        svg_bad = svgs[1];
​
        good_rect = svg_good.getElementsByTagName("rect")[0];
        bad_rect = svg_bad.getElementsByTagName("rect")[0];
​
        var good_matrix = good_rect.getCTM();
        var bad_matrix = bad_rect.getCTM();
        var t2e = bad_rect.getTransformToElement(svg_bad);
​
        var gp = good_rect.nearestViewportElement.createSVGPoint();
        var bp = bad_rect.nearestViewportElement.createSVGPoint();
        var good = gp.matrixTransform(good_matrix);
        var bad = bp.matrixTransform(bad_matrix);
        var yay = bp.matrixTransform(t2e);
        console.log("good");
        console.log(good);
        console.log("bad");
        console.log(bad);
        console.log("yay");
        console.log(yay);
    </script>
</body>
</html>
​
​
    