Control the viewBox by adding the attribute viewBox to the svg element.Control the viewport via width and height parameters on the svg element.The viewBox is similar to the viewport, but you can also use it to “pan” and “zoom” like a telescope.The viewport is like a window you look through to see an SVG’s content.Let’s boil everything down into some bullet points: If you don’t, they’ll default to 100% and you’ll likely have an oversized graphic: Whenever you use the viewBox attribute, remember to set your viewport dimensions too. You can, of course, both pan and zoom at the same time, by using all four parameters at once, for example: Number 6 is the same, but panned to the right and down: ![]() To remind you, SVG number 3 has a 50 by 50 viewport, the viewBox is added but with no panning or zooming. ![]() Take a look at how this panning works in this example.
0 Comments
Leave a Reply. |