Подтвердить что ты не робот

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; }
4b9b3361

Ответ 1

(Скопируйте из обновления автора, чтобы отметить вопрос как "ответил" )

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

svg { overflow: hidden; }

Ответ 2

Я не хотел, чтобы он исчезал при переполнении, поэтому мне нужно было две вещи. max-width и height.

Примечание. Использование width и max-height не помогло.