Home/ Questions/Q 7418207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T07:50:41+00:00

In this example, the green circle is cut off <html> <body> <svg xmlns=http://www.w3.org/2000/svg width=300

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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…

    1. add an overflow=”visible” attribute on the inner svg elements
    2. change the x, y values so that the circle is within the viewport
    3. add a viewBox so that you define an explicit viewport showing the area you want to see in the inner svg.
    • 0