Строки анимации SVG неустойчивые поведение

Question

Я пытаюсь оживить линии, идущие слева, справа, сверху и снизу (линии должны начинаться с краев экрана). Анимация отлично работает в IE11, но не в Mozilla и Chrome. Другие браузеры, которые я не тестировал. Я использовал Adobe Illustrator для рисования. http://codepen.io/Ljanmi/pen/WbyLWv

В Chrome и Mozilla (IE11 отлично и действует нормально), если в Illustrator я установить объект> монтажных областях> Fit Для произведения Bounds (минимизация размера холста, которые я обычно делаю, когда создавать или редактировать SVG) я получаю этот результат (еще хуже) - http://codepen.io/Ljanmi/pen/yyqVqz

Я потратил часы и часы, пытаясь выяснить самостоятельно без успеха. Я начал темы на форуме GSAP и форуме трюков CSS (stackoverflow.com ограничивает меня отправкой только двух ссылок в качестве новичков).

Я использовал GSAP JS-библиотеку для анимации (как правило, очень доволен GSAP), но анимация ведет себя одинаково, если я использую CSS3 для анимации. Я пришел к выводу, что это не связано с GSAP (свойство размера окна просмотра, похоже, имеет мало эффекта), скорее всего, будет связано с самой структурой SVG или совместимостью браузера или с обоими. Поэтому я предполагаю, что должна быть какая-то работа, чтобы заставить ее работать, как хотелось бы. У меня, скорее всего, не хватает знаний SVG/HTML/CSS3, так как я не очень опытен, но стараюсь учиться как можно больше. Спасибо всем за чтение.

Answer 1

Добавить svg { overflow: visible } и он должен работать одинаково во всех браузерах (более подробное объяснение ниже). Если вы хотите понять, почему строки обрезаются, добавьте границы в элемент svg.

Другой способ - убедиться, что размер svg соответствует тому, что вы хотите, например, с помощью css.

Все браузеры, кроме IE, реализовали hidden в качестве начального значения для свойства overflow для элемента svg <, как того требует спецификация SVG 1.1. SVG 2 изменил это для (внешних) встроенных элементов svg, так что он требует того, что в настоящее время делает IE11. Это займет некоторое время, прежде чем это изменится во всех браузерах, поэтому теперь просто добавьте правило overflow: visible, и оно должно работать корректно во всех браузерах.

Answer 2

У меня были некоторые проблемы с браузерами до сих пор не показывая переполненном содержание для SVGs и обнаружили, что это наконец-то мимо него:

svg:not(:root) { 
    overflow: visible !important; 
}