All geek questions in one place

Svg cropped

So, I only recently got into SVG, and I had problems with the password related to the fact that instead of resizing the container, my SVG image is cut out.

HTML:

<!DOCTYPE html> <html> <head> <title>Eye</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/snap.svg.js"></script> <script src="js/eye.js"></script> </head> <body> <svg id="svg"></svg> </body> </html>

JS:

 window.onload = function() { var s = Snap("#svg"); var circle = s.circle(90,120,80); var square = s.rect(210,40,160,160); var ellipse = s.ellipse(460,120,50,80); }

Jsfiddle

Now, with this CSS code, it certainly won't be cropped anymore, since the user-agent stylesheet in Google Chrome contains "overflow: hidden" in relation to SVG. But is this really the right way to resolve this issue? Also, why is it cropped and not scaled? Should I "draw" my svgs using percentages instead of pixels?

+5
source share
2 answers

You have not set an internal SVG dimension at this time. You must add the viewBox attribute to indicate the part of the SVG that you really want to show. (The "full" SVG plain is almost endless)

Additionally, you can set the external size of the SVG container. This is the size of the window in which the SVG will appear.

Together, it might look like this:

 <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 300"></svg> 

 #svg { overflow: visible; width: 100%; }

Fiddle

+2
source

SVG has a default width and height (300 pixels x 150 pixels). If you have elements larger than the SVG frame, they will not be visible. Set the width and height of the SVG for convenience:

For example: https://jsfiddle.net/4yjtbun9/

 <svg id="svg" width="520" height="210" ...
0
source

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

More articles:


All Articles