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

canvas internet-explorer size boundary raphael
person Christopher Knowl    schedule 12.04.2011    source источник
comment
не могли бы вы добавить свой последний комментарий в качестве ответа и пометить его как принятый, это удалит ваш вопрос из списка неотвеченных, который я просматриваю, чтобы найти вопросы без ответов.   -  person David Waters    schedule 02.08.2011
comment
Этот вопрос, а также решение по-прежнему актуальны для IE 11.   -  person Rick-Rainer Ludwig    schedule 16.06.2014

Ответы (2)


arrow_upward
10
arrow_downward

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

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

svg { overflow: hidden; }
person robermorales    schedule 16.09.2011

arrow_upward
0
arrow_downward

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

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

person mvndaai    schedule 30.06.2016