Restrict SVG to div boundaries

Question

Hi,

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

Answer 1

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.

Answer 2

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.