CODEWITHSUNDEEP
javascripthtmlsvgraphael
Max
Max

Reputation: 91

Restrict SVG to div boundaries

I'm trying to show multiple polygons as SVG image on a div using Raphael. Although, I've set up the size for the div Raphael gets as an argument to create the paper object, the size of the div element is not respected and the image is drawn outside of the div boundaries (which I somehow understand, as the polygon coordinates go beyond the div boundaries).

Is there any way to make the SVG behave like a normal image that scales automatically once the browser window size changes and prevent the SVG from being drawn outside the div boundaries (like the behaves)?

Cheers, Max

Upvotes: 0

Views: 2877

Answers (3)

lajarre
lajarre

Reputation: 5162

Seems like there are 2 questions in one.

For the "scaling automatically with the browser window like an image" thing, you can take a look at the code of this example, which does the job:

http://www.irunmywebsite.com/raphael/scaleraphael.php

Upvotes: 1

jessicah
jessicah

Reputation: 975

To make Raphael's element fill the containing element (sounds like what you want), use:

var paper = Raphael("someElement", "100%", "100%");

I've only tested it with Firefox and Chrome, but seems to work okay.

Upvotes: 1

Mark
Mark

Reputation: 5609

Set the overflow style of the div to be overflow:auto or overflow:hidden. The default for a div is overflow:visible, which makes SVG bleed outside the div. However, if you want the whole SVG to "scale" down so you can see the whole thing, you'll need to scale and translate each Raphael element on the canvas (i.e zoom). I've done both scrolling and zooming, but obviously, scrolling is much easier.

Upvotes: 0

Related Questions