Menu
In this example, the green circle is cut off
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1" style="background-color: pink" viewBox="-300 -300 500 500">
<svg width="500" height="500" x="0" y="0"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>
<svg width="500" height="500" x="0" y="0"><circle cx="0" cy="0" r="40" stroke="black" stroke-width="2" fill="green" /></svg>
</svg>
</body>
</html>
See: http://jsfiddle.net/sCzZT/
Notice each circle is wrapped in its own svg
In this example (no nested svgs), the green circle is not cut off
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1" style="background-color: pink" viewBox="-300 -300 500 500">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<circle cx="0" cy="0" r="40" stroke="black" stroke-width="2" fill="green" />
</svg>
</body>
</html>
http://jsfiddle.net/jVH9q/ How do I get the green circle to not get cut off when using nested svgs?
549
The inner svg has a default viewport which is 0, 0, 500, 500 (x, y, width, height) and by default anything that overflows this area is hidden/clipped.
There are several things you could do...
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
