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

Question

我正在为我的徽标编写一个动画（here 是代码笔的 link），您也可以在那里看到代码，但我会 post 在这里作为嗯

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

这是 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

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

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

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

How to allow the path elements in an svg element to overflow the container