我正在尝试设置从左，右，上和下方开始的线条（线条应从屏幕边缘开始）。动画在IE11中运行良好，但在Mozilla和Chrome中运行不正常。其他浏览器我还没有测试过。我用Adobe Illustrator画画。 http://codepen.io/Ljanmi/pen/WbyLWv
在Chrome和Mozilla中（IE11很好并且正常）如果在Illustrator中我设置了Object＆gt; Artboards＆gt; Fit To Artwork Bounds（最小化Artboard大小，我通常在创建或编辑SVG时这样做）我得到了这个结果（更糟） - http://codepen.io/Ljanmi/pen/yyqVqz
我花了几个小时试图自己弄清楚没有成功。我开始讨论GSAP论坛和CSS技巧论坛（stackoverflow.com限制我只发布2个链接作为新人）。
我使用GSAP JS库进行动画制作（通常对GSAP非常满意），但如果我使用CSS3进行动画处理，动画的行为也是一样的。我得出结论，它与GSAP无关（视图框大小属性似乎在这里有一些影响），更可能与SVG结构本身或浏览器兼容性或两者兼容。所以我想必须有一些工作让它像我想的那样工作。我很可能缺乏一些SVG / HTML / CSS3知识，因为我不是很有经验，但我尽可能多地学习。谢谢大家阅读。
答案 0 :(得分：1)
添加svg { overflow: visible }，它应该在所有浏览器中都一样（下面的详细说明）。如果要查看线被剪裁的原因，请为svg元素添加边框。
另一种方法是确保svg的大小与你想要的大小匹配，例如使用css。
除了IE之外的所有浏览器都将hidden作为＆lt; svg＆gt;的overflow属性的初始值。元素，正如SVG 1.1规范所要求的那样。 SVG 2已经为（最外层的）内联svg元素更改了这个，因此它需要IE11当前正在执行的操作。在所有浏览器中更改之前需要一些时间，所以现在只需添加overflow: visible规则，它就可以在所有浏览器中正常运行。
答案 1 :(得分：0)
我遇到了一些麻烦，浏览器仍然没有显示SVG溢出的内容，发现它终于超越了它：
svg:not(:root) {
overflow: visible !important;
}