SVG矢量图像动画

Question

我在Adobe Illustrator中创建了3个矢量图像。

我想要动画这个矢量质量的图像一样的方式gif做，在浏览器mypage.php <img src="assets/img/logo.svg" alt="" alt="" width="65" height="45"/>的.svg格式的3图像的快速无限循环序列。

对于.svg来说，获得这样的动画最正确的方法是什么，我是必须使用所有给定的方法来创建矢量动画，还是在我的场景中可以使用一些不同的方法

Answer 1

有几种方法可以做到这一点。考虑到您提供的信息，这里有一种方法。

我们将框架堆叠在另一个框架之上。然后让它们一次一个可见。

​

.sequence {
  position: relative;
}

.sequence img {
  position: absolute;
  top: 0;
  opacity: 0;  /* start all frames invisible */
  animation: cycle 3s steps(1) infinite;
}

/* three images, so each gets made visible for 1/3 of the time */
@keyframes cycle {
  0%  { opacity: 1; }
  33% { opacity: 0; }
}

/* start (ie. show) the second frame 1 sec after the first */
.sequence img:nth-child(2) {
  animation-delay: 1s;
}

/* start (ie. show) the third frame 2 sec after the first */
.sequence img:nth-child(3) {
  animation-delay: 2s;
}

<div class="sequence">
  <img src="https://placeimg.com/300/200/animals"/>
  <img src="https://placeimg.com/300/200/nature"/>
  <img src="https://placeimg.com/300/200/people"/>
</div>

​

这些图像恰好是JPEG格式，但它们是什么类型并不重要。你的SVG应该可以工作。

如果您有SVG，您可能会发现将它们组合到单个SVG中会更好。将每个帧的内容放在它自己的组(<g>元素)中。然后使用与上面类似的方法，而不是一次显示一个组。

Answer 2

对于您想要的内容，它是svg图像这一事实并不重要。

您可以创建一个元素和动画通过不同的文件作为背景。

​

div{
  width: 102px;
  height: 102px;
  border: 1px solid black;
  animation:  rotateImages 1s infinite; 
}

@keyframes rotateImages {
  0%   { background: url("https://www.placecage.com/g/100/100"); }
  32%   { background: url("https://www.placecage.com/g/100/100"); }
  33%  { background: url("https://www.placecage.com/100/100"); }
  65%  { background: url("https://www.placecage.com/100/100"); }
  66% { background: url("https://www.placecage.com/c/100/100"); }
  100% { background: url("https://www.placecage.com/c/100/100"); }
}

<div></div>

​