<!doctype HTML>
<html>
<body>
<div style="width: 50px; height: 50px; padding:0px; background-color: #eee;">
<svg width="100%" height="100%" id="test">
<circle cx="50" cy="1" r="10" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="5" cy="20" r="15" stroke="blue" stroke-width="4" fill="red" />
</svg>
</div>
<script>
var svg=document.getElementById("test");
setViewboxToContent(svg);
function setViewboxToContent(svg)
{
var bb=svg.getBBox();
var w=bb.width;
var h=bb.height;
var l=bb.x;
var t=bb.y;
svg.setAttribute("viewBox", (l-2)+" "+(t-2)+" "+(w+4)+" "+(h+4));
}
</script>
</body>
</html>
The bounding box of the SVG can be anything
Just try and move the circles around..
I give 2 pixels margin for fatter lines, when your circles get real small or close together.
It's not perfect, because line-thickness is not taken into account by SVG.getBBox(). but it's quite good. nonetheless
Geen opmerkingen:
Een reactie posten