SVG draws outside canvas boundary in Internet Explorer 9

Question

I am using the Raphael Javascript library to do some rudimentary drawing for a web page. I am just drawing some lines that radiate out from a point. In Chrome, Firefox, and Opera, these lines are subject to the size of the SVG canvas. This is the desired behaviour, because I want to draw a ray as long as I want but I do not want it to affect the size of the page. If I draw a 5000px wide box, only the part inside the canvas will be visible.

However, Internet Explorer (surprise surprise) completely ignores the size and bounds of the canvas and accommodates whatever is drawn. So if I draw a 5000px wide box starting at 0, 0, but the canvas is 50px by 50px and starts at 20, 20, you'll still see a box at 0, 0 that's 5000px wide, and the page will have a scrollbar at the bottom so you can scroll sideways to view the entire thing. I do not want this to happen.

How can I get Internet explorer to behave like the other browsers in this respect? I do not want the page to be able to scroll to view the other parts of the image drawn by Raphael, I want the edges to be clipped by the natural size of the document.

---

I have stupidly answered my own question with this newsgroup thread: http://groups.google.com/group/raphaeljs/browse_thread/thread/43c71ec89a6a01ed

Simply add this to your CSS:

svg { overflow: hidden; }

Mor

could you please add your last comment as an answer and mark it as accepted, this will move your question off the unanswered list which I review to look for unanswered questions. – Abba

This question and also the solution are still valid for IE 11. – Waterresistant

Answer 1

(Copy from the author update, in order to mark the question as "answered")

Simply add this to your CSS:

svg { overflow: hidden; }

Carr

Answer 2

I didn't want it disappearing in overflow, so I needed two things. max-width and height.

Note: Using width and max-height didn't work.

Briefing