html - 如何让 svg 元素中的路径元素溢出容器

Question

我正在为我的 Logo 编写动画(here 是代码笔的链接)，您也可以在那里看到代码，但我也会在这里发布。

所以我针对每个路径元素并更改了它的属性，一切正常，除了因为我使用“转换”来移动元素，因为它们离开容器并被隐藏。

这是 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您添加到 svg 的 CSS 定义中的规则应该有效。

之所以没有，是因为您的 SVG 也有一个 <clipPath>这具有 overflow hidden 的效果。当你也摆脱它时，事情就会如你所愿。

Demo codepen

为了删除剪辑，我删除了 <clipPath></clipPath>元素，以及 clip-path="url(#clipPath20)"引用自 <g> .这两个都在文档的开头附近。