SVG рисует за пределами холста в Internet Explorer 9 - PullRequest
19 голосов
/ 13 апреля 2011

Я использую библиотеку 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; }

Ответы [ 2 ]

10 голосов
/ 16 сентября 2011

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

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

svg { overflow: hidden; }
0 голосов
/ 30 июня 2016

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

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

...