Old school D3 from simpler times

All examples By author By category About

enjalot

Full window Github gist

Static SVG Aspect ratio problem

<!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>