如何允许svg元素中的路径元素溢出容器

Question

我正在为我的徽标编写动画(这里是codepen的链接),你也可以在那里看到代码,但我也会在这里发布.

所以我针对每个路径元素并改变它的属性,一切正常,除了因为我使用"变换"来移动元素,因为它们离开容器并被隐藏.

这是SVG元素的CSS

svg {
  width:400px;
  height:400px;
  margin-top:100px;
  margin-left:calc(50% - 200px);
  transform-style:preserve-3d;
  overflow:visible;
}

我尝试viewbox在svg标签中添加内联属性,但这也不起作用,我该怎么办？我希望无论在哪里,每条路都可见,这可能吗？

先感谢您.

Answer 1

overflow: visible您添加到CSS定义的规则svg应该有效.

之所以没有,是因为你的SVG还有一个<clipPath>隐藏溢出的效果.当你摆脱它时,事情就像你想要的那样.

演示代码

为了摆脱剪辑,我删除了<clipPath></clipPath>元素,并clip-path="url(#clipPath20)"从中删除了引用<g>.这两个都接近文件的开头.