SVG рисует за пределами границы холста в Internet Explorer 9

Я использую библиотеку Raphael Javascript, чтобы сделать элементарный рисунок для веб-страницы. Я просто рисую несколько линий, исходящих из точки. В Chrome, Firefox и Opera эти строки зависят от размера холста SVG. Это желаемое поведение, потому что я хочу рисовать луч столько, сколько хочу, но я не хочу, чтобы он влиял на размер страницы. Если я нарисую рамку шириной 5000 пикселей, будет видна только часть внутри холста.

Однако Internet Explorer (сюрприз-сюрприз) полностью игнорирует размер и границы холста и учитывает все, что нарисовано. Итак, если я нарисую рамку шириной 5000 пикселей, начиная с 0, 0, но холст имеет размер 50 на 50 пикселей и начинается с 20, 20, вы все равно увидите прямоугольник с 0, 0 шириной 5000 пикселей, а на странице будет полоса прокрутки. внизу, чтобы вы могли прокрутить в сторону, чтобы увидеть все. Я не хочу, чтобы это произошло.

Как я могу заставить Internet Explorer вести себя как другие браузеры в этом отношении? Я не хочу, чтобы страница могла прокручиваться для просмотра других частей изображения, нарисованного Рафаэлем, я хочу, чтобы края были обрезаны до естественного размера документа.

Я глупо ответил на свой вопрос в этой ветке группы новостей: http://groups.google.com / group / raphaeljs / browse_thread / thread / 43c71ec89a6a01ed

Просто добавьте это в свой CSS:

svg { overflow: hidden; }