SVG 和 CSS 中的简单速度计动画

Question

所以我正在尝试使用 SVG 图标制作 CSS3 动画，其中指针在 speedo 上旋转，同时在中心保持一个固定点。

在这种情况下，我尝试从右到左制作动画（好像速度计要归零），但似乎无法正确完成。我已经接近了以下内容：

<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 相关时，因此将不胜感激。

Answer 1

transform-origin:center bottom;

如果针头图像一开始是笔直的，则可以使用。看起来问题在于针图像是倾斜的。让 CSS 创建角度。

Answer 2

你要找的是transform-origin，它让你选择动画锚点的位置，试试这个：

transform-origin:center bottom;

可以在这里找到母马：transform-origin