Skip to content

Instantly share code, notes, and snippets.

@enjalot

enjalot/index.html

Created October 10, 2011 21:29
Show Gist options
  • Save enjalot/1276601 to your computer and use it in GitHub Desktop.
Save enjalot/1276601 to your computer and use it in GitHub Desktop.
Download ZIP
Static SVG Aspect ratio problem
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment