SVG 矢量图像动画答案

【问题标题】：SVG vector image animationSVG 矢量图像动画
【发布时间】：2019-08-27 10:44:03
【问题描述】：

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

我想以与gif 相同的方式制作此矢量质量图像的动画，在浏览器mypage.php <img src="assets/img/logo.svg" alt="" alt="" width="65" height="45"/> 中以.svg 格式快速循环播放3 张图像。

为.svg 获取此类动画的最正确方法是什么，我是否必须使用所有给定的方法来创建矢量动画，或者在我的场景中，我可以用不同的方式来实现它

【问题讨论】：

动画图像的不透明度。
@Robert Longson 你好！我有 3 个矢量文件和Adobe Illustrator 项目文件，但这是我第一次处理Scalable Vector Graphics。您能否提供一些此类案例的示例链接，我想它必须使用css 完成，对吧？
@Robert Longson 我以这种方式显示单个 .svg <img src="assets/img/logo.svg" alt="" alt="" width="65" height="45"/> 与任何其他格式一样
@Robert Longson 是的，在浏览器中是html，js，php页面mypage.php
您是否在 Stackoverflow 中搜索过这个问题？ Example

标签： html css animation svg vector-graphics

【解决方案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> 元素）。然后使用与上述类似的方法，但一次只显示一个组。

【讨论】：

你好，我需要一个页面的动画图像，所以这个方法似乎完全回答了我的问题，我只是使用 0.1 和 0.2 循环 0.3s 而不是秒来使其快速

【解决方案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"); }
}

&lt;div&gt;&lt;/div&gt;

【讨论】：