Переполнение: видимое на SVG

Возможно ли установить overflow: visible на <svg> элементы?

Этот простой пример jsfiddle ломается в каждом браузере, к которому у меня есть доступ (некоторые версии Chrome и Firefox), поскольку они действуют как overflow: hidden.

Может ли кто-нибудь сказать мне, поддерживает ли поддержка svg слишком незрелая, чтобы делать такие простые вещи, или если я делаю что-то не так в своем коде?

Мое практическое использование overflow: visible - это ось диапазона на графике, где нижняя половина галочки -0 отключается.

Ответ 1

Я предполагаю, что вы имеете в виду встроенные <svg> элементы в HTML, если это так, это просто ограничение реализации. IE9 + разрешает элементы overflow:visible on <svg> , но до сих пор другие браузеры не AFAIK.

Один из возможных способов обхода (как это должно быть сделано в первую очередь IMHO) - указать viewBox, который определяет систему координат внутри svg. Затем вы рисуете материал внутри этой системы координат. Если вещи обрезаются (или, другими словами, если элемент находятся вне области viewBox), просто увеличьте ширину viewBox и/или высоту соответственно.

Если вы задаетесь вопросом о хорошем дефолте для своего конкретного viewBox, попробуйте [0 0 width height] (где ширина и высота - это размер вашего svg, который у вас есть на данный момент), а затем просто увеличивайте высоту до тех пор, пока нижний тик не будет полностью видны.

Обновление 2014: Он все еще немного непоследователен в браузерах, но он туда попадает. Firefox и IE поддерживают overflow:visible на встроенных элементах svg, а Blink (Opera 23/Chrome 36) добавили поддержку для нее, подробности см. В bugreport.

Ответ 2

overflow: visible  
box-shadow : 0px -0px 10000px transparent /*trick for chrome*/

Добавление огромной тени коробки в SVG или добавление SVG в DIV с огромной тенью. В Chrome я заметил, что переполнение обрезается до предела теневой коробки.