All geek questions in one place

SVG viewBox not working with nested svgs in negative position

In this example, the green circle is cropped

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

Please note that each circle is wrapped in its own svg

In this example (without nested svg) the green circle is not cropped

 <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 to make the green circle not crop when using nested svgs?

+4
source share
1 answer

Internal svg has a default viewport, which is 0, 0, 500, 500 (x, y, width, height), and by default, everything that overflows this area is hidden / cropped.

There are a few things you could do ...

  • add overflow = "visible" attribute on internal svg elements
  • change the x, y values ​​so that the circle is inside the viewport
  • add a viewBox to define an explicit viewport showing the area you want to see in the internal svg.
+11
source

Source: https://habr.com/ru/post/1395054/

More articles:


All Articles