Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG being cut off

I found an answer on here that I dont understand. Unfortunately i am unable to comment yet.

Here is the link to the answer, SVG renders but gets cut off in Firefox only - why?

The Accepted answer by Boris Zbarsky has a description on why it is not working. I do not fully understand this answer and wondering a way to correct this issue so I can make it work on Firefox.

For my case, the SVG text element is there on all browsers, In Internet explorer all 3 texts are visible, In Firefox and chrome any of the SVG text elements are cut off if they are more than 1/4 to the right of the screen. If I move them through the developer tab to the left of the imaginary cut off they show up.

There is no div or block along this strange area that could be hiding the SVG text.

This is a local implementation.

Any help on what is happening would be very helpful.

like image 917
BrinkDaDrink Avatar asked Jul 22 '14 18:07

BrinkDaDrink


People also ask

Why is my SVG cropped?

Because if your viewBox is invalid the viewport is determined by the width and height of the outermost element (in your case the SVG element at 200x200px). Since your content overflows this it is cropped.

Are SVGs infinitely scalable?

Infinite Scalability It's right there in the name: SVGs can be expanded or shrunk down to any size without a loss of quality. Image size and display type don't matter with SVGs — they always look the same.


1 Answers

I had similar problem. Try to add css property:

overflow: visible 
like image 97
Nikita Avatar answered Oct 04 '22 14:10

Nikita