所以我正在尝试制作一个带有 SVG 图标的 CSS3 动画,其中针在速度表上旋转,同时保持中心的固定点。
在这种情况下,我试图从右到左制作动画(就好像速度计要归零),但似乎无法正确完成。我已经接近以下内容:
<g>
<path fill="#C6A3A3" id="arrow" d="M26.323,23.042c-0.256,0-0.513-0.098-0.707-0.293c-0.392-0.391-0.392-1.023,0-1.414l9.899-9.899
c0.391-0.391,1.022-0.391,1.414,0c0.391,0.391,0.391,1.023,0,1.414l-9.899,9.899C26.834,22.944,26.578,23.042,26.323,23.042z"/>
</g>
(SVG 还有更多内容,但这是相关的部分)
和 SCSS 文件:
@keyframes speedo {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-120deg);
}
}
#arrow {
fill: rgb(66, 169, 97);
animation: speedo 2s ease infinite;
transform-origin: 30px 20px 10px;
}
从那里,我只得到这个:
它绕着自己的中心旋转,而不是泳表本身的中心。我见过人们在 <g>
周围放置变换元素,但我不确定如何应用它们。另外,transform-origin: bottom left
没有帮助。我仍在努力掌握 CSS 转换/动画,尤其是当它们与 SVG 相关时,因此我们将不胜感激。
最佳答案
transform-origin:center bottom;
如果针图像一开始是直的,则将起作用。看起来问题是针图像是 Angular 。让 CSS 创建 Angular 。
关于css - SVG 和 CSS 中的简单速度计动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24776596/