用 svg 组的翻译来摇动 css 问题

Posted 2023-03-10

【中文标题】用 svg 组的翻译来摇动 css 问题

【英文标题】：shake css issue with translation of svg group

【发布时间】：2017-02-09 16:32:31

【问题描述】：

我有一只蜜蜂，我正在尝试为它的翅膀设置动画，但由于某种原因，它们被翻译到了视图框的顶部。

这是我的笔：

http://codepen.io/vannygee/pen/BpqVeX

起初我以为这是问题所在，但我想……

display: inline-block;
transform-origin: center center;

有人熟悉shake-css吗？

【参考方案1】：

查看 GreenSock 关于 SVG 转换的博文：https://greensock.com/svg-transforms

我认为基本要点是某些浏览器中的 translate 属性与 SVG 的视图框相关，而不是您定位的元素/路径。 GSAP 是我的首选解决方案，因为它将转换转换为矩阵转换以弥补这个问题。

【讨论】：

谢谢，我会看看我注意到我文件中的翅膀有一个奇怪的平移（和旋转）。我没有意识到如果我在草图中旋转文件（垂直和水平翻转）它会应用翻译。也许我会从头开始，路径到路径

看来你是对的。如果您需要广泛的浏览器支持，我会考虑 GSAP，否则看起来问题是您的 SVG 中继承的转换。

好吧，所以我查看了 GSAP，我想我会看看这是否是我的 svgs 错误，看看这有多有趣：codepen.io/vannygee/pen/bgmxeo

是的，SVG 的结构很奇怪，是最大的问题，但另一方面，看看你将多少 CSS 压缩到 3 行 JS 中。 （显然需要 3rd 方库）但更易于管理的动画。祝你 SVG 好运！

再次感谢 Alejalapeno 我现在正在计划一个大型动画，所以我需要考虑一下