使用CSS为SVG精灵设置动画

Question

我有一些svg精灵，想在网站上制作动画。 建议使用这些文件的方法是什么？

首先，这是我的Hunter (raw covert) - 我把它作为eps并通过indesign转换为svg。

我的条目是通过更改关键帧动画中的当前图片来通过css为其设置动画。

思路：

1. 我找到了this精彩的博文，其中当前图片是通过锚点
选出的
2. 使用背景位置

所以我在文件中识别出不同的图像，给他们一个ID并隐藏其他图像。您可以使用#a #b #c ....

进行互连

Hunter Image #a

- ＆GT; 问题：精灵上的位置仍然不同。我也必须改变背景位置。

https://jsfiddle.net/roest/035r0ozq/

SELECT
  P.PersonID, 
  P.FirstName, 
  P.LastName, 
  P.Gender, 
  P.DateOfBirth
FROM PERSON P
LEFT OUTER JOIN STUDENT S ON P.PersonID = S.StudentID 
LEFT OUTER JOIN TEACHER T ON P.PersonID = T.TeacherID
WHERE S.PersonID is null and T.PersonID is null

条目2 - 像普通精灵一样使用背景位置...... 但有些事情似乎仍然存在。

如果您使用带有普通精灵的getspritexy.com，您会在“生成的精灵图像”中看到选择。和我的svg你看到多个图像...... 我的testFiddle中的结果相同：

https://jsfiddle.net/roest/4bbnnm9t/

0% {
    background-image: url(http://elefantenjagdverein.de/server/elephants/hunter/hunter.hidden.svg#a);
  }
  20% {
    background-image: url(http://elefantenjagdverein.de/server/elephants/hunter/hunter.hidden.svg#b);
  }

我的哪些想法是最好的，我怎样才能让我的猎人正确制作动画？

Answer 1

要让您的框架从一个位置步进到另一个位置而不滑动，您可以使用step-end作为计时功能。

animation: hunter-animation 2.5s step-end both infinite;

请参阅：https://jsfiddle.net/4bbnnm9t/3/

现在它已经步入，你只需调整位置就可以了。