javascript - SVG 动画线条不稳定的行为

Question

我正在尝试为从左、右、上和下移动的线条设置动画(线条应从屏幕边缘开始)。动画在 IE11 中运行良好，但在 Mozilla 和 Chrome 中运行不佳。其他浏览器我没有测试过。我用 Adob​​e Illustrator 来画画。 http://codepen.io/Ljanmi/pen/WbyLWv

在 Chrome 和 Mozilla 中(IE11 很好并且行为正常)如果在 Illustrator 中我设置对象>画板>适合图稿边界(最小化画板大小，我通常在创建或编辑 SVG 时这样做)我得到这个结果(甚至更糟) - http://codepen.io/Ljanmi/pen/yyqVqz

我花了好几个小时自己想办法，但没有成功。我在 GSAP 论坛和 CSS 技巧论坛上开始了话题(stackoverflow.com 限制我作为新手只能发布 2 个链接)。

我使用 GSAP JS 库制作动画(通常对 GSAP 非常满意)，但如果我使用 CSS3 制作动画，动画表现相同。我得出的结论是它与 GSAP 无关(viewbox 大小属性在这里似乎影响不大)，更可能与 SVG 结构本身或浏览器兼容性或两者有关。所以我想必须有一些解决方法才能让它像我想要的那样工作。我很可能缺乏一些 SVG/HTML/CSS3 知识，因为我不是很有经验，但我想尽可能多地学习。感谢大家阅读。

Answer 1

添加 svg { overflow: visible } 它应该在所有浏览器中工作相同(下面有更长的解释)。如果您想查看线条被剪裁的原因，请向 svg 元素添加边框。

另一种方法是确保 svg 的大小符合您的要求，例如使用 css。

除 IE 外，所有浏览器都将 hidden 实现为 overflow 属性的初始值，正如 SVG 1.1 规范所要求的那样。 SVG 2 已针对(最外层的)内联 svg 元素更改了此设置，因此它需要 IE11 当前正在执行的操作。在所有浏览器中更改之前需要一些时间，所以现在只需添加 overflow: visible 规则，它应该在所有浏览器中正常工作。