如何为 svg 动画提供更多空间？

Posted 2023-03-28

【中文标题】如何为 svg 动画提供更多空间？

【英文标题】：How to give more place for svg animation?

【发布时间】：2021-12-22 03:53:38

【问题描述】：

是的，任务有点奇怪。在hover 上，每个项目都必须缩放。 中左项目工作稳定。顶部和左侧也几乎没有问题，但顶部角落被裁剪了。正确的项目缩放错误，仅在所有 SVG 中心附近悬停时。 就像他们没有地方可以扩展一样。 我试图改变宽高，它没有帮助。 什么属性，可以修复？

Codepen link

【问题讨论】：

欢迎来到 Stack Overflow！寻求调试帮助的问题必须在问题本身中包含重现它所需的最短代码。 注意 - 请不要滥用代码块来绕过此要求。。跨度>

我想你可以通过使用带有负值 min-x 和 min-y 的 viewBox 属性来修复它。例如尝试

【参考方案1】：

当您将鼠标悬停在 Дети, Финансы 时，效果不佳。 只有将鼠标悬停在其笔划上时，路径才会缩放。 所以我也更正了。 这段代码可以帮助你。

path:nth-child(2) 
  fill: white;

svg 
  overflow: visible;

Codepen link

【讨论】：

谢谢，你帮了我很多！