SVG和CSS中的简单车速表动画
因此,我试图制作一个带有SVG图标的CSS3动画,其中指针在speedo上旋转,同时在中心保持一个固定点 在本例中,我尝试从右到左制作动画(好像车速表要归零),但似乎做得不对。我已接近以下几点:SVG和CSS中的简单车速表动画,css,animation,svg,Css,Animation,Svg,因此,我试图制作一个带有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.
<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>
从这一点上,我只得到:
它围绕自己的中心旋转,而不是围绕speedo本身的中心旋转。我见过人们在
元素周围放置转换,但我不知道如何应用它们。另外,变换原点:左下
也没有帮助。我仍在努力掌握CSS转换/动画,尤其是与SVG相关的CSS转换/动画,因此,如果您有任何帮助,我将不胜感激 您要查找的是变换原点
让您选择动画定位点的位置,尝试以下操作:
变换原点:中心-底部代码>
可在此处找到Mare:
如果针头图像一开始是直的,则将起作用。看起来问题在于指针图像有角度。让CSS创建角度。该答案给出了以下动画,这是不正确的:
@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;
}
transform-origin:center bottom;