使用 CSS 为 SVG 精灵设置动画

Question

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

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

我的条目是通过 css 通过更改关键帧动画中的当前图片来对其进行动画处理。

想法：

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

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

Hunter Image #a

-> 问题：精灵上的位置仍然不同。我还必须更改背景位置。

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

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);
  }

条目 2 - 像普通精灵一样使用背景位置... 但有些东西似乎还是坏了。

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

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

0% {
        background: url('http://elefantenjagdverein.de/server/elephants/hunter/hunter.svg') no-repeat -83px -15px;
        width: $width;
        height: $height;
      }
      20% {
        background: url('http://elefantenjagdverein.de/server/elephants/hunter/hunter.svg') no-repeat -131px -15px;
        width: $width;
        height: $height;
      }

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

Answer 1

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

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

见：https://jsfiddle.net/4bbnnm9t/3/

现在它已经开始了，您只需调整位置以使其正确。