css中svg图像的动画元素答案

【问题标题】：Animate element of svg image in csscss中svg图像的动画元素
【发布时间】：2022-02-01 23:23:34
【问题描述】：

我正在尝试为 svg 中图像的某些元素设置动画。为了测试动画，我首先在整个图像上进行了尝试，以检查它是否运行良好（确实如此）。但是，当我通过 id note-double-1 （要设置动画的元素的 id）更改类 state-indicator-illustration 时，元素 note-double 1 完全消失了，我不明白为什么。我指定测试我将图像“逐行”插入HTML 代码。

这是代码（我放了 jsfiddle 以避免很长的消息）：

JsFiddle：https://jsfiddle.net/pju2ateL/2/

感谢您的帮助，埃尔希里。

【问题讨论】：

如果您删除动画正在运行的路径的变换属性。作为观察：你有很多变换来回移动形状。
我试过了：jsfiddle.net/014psox2/2 还是不行

标签： html css svg

【解决方案1】：

正如我所评论的：您需要删除路径的变换属性。为了保留您的转换，我将路径包装在一个组中并转换组而不是转换路径。我还必须更改 viewBox，否则路径会落在 svg 画布之外。

如您所见，css 动画正在运行。

/* .state-indicator-illustration is working */
#note-double-1 {
  /*overflow: hidden;*/
  transform: translateY(0px);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" width="244" height="149.388" viewBox="-15 -320 244 149.388">          
  <g id="off" transform="translate(-1090, -390)">                  
    <g transform="translate(-28.904 -320.214)" >
      <path id="note-double-1" d="M1114.926,434.328l5.138-22.688,22.647,1.41c-.05.226-.093.412-.133.6q-2.918,12.882-5.824,25.761a5.089,5.089,0,0,1-3.018,3.727,7.907,7.907,0,0,1-9.016-2.153c-2.277-2.776-1.476-6.41,1.8-7.774a7.7,7.7,0,0,1,8.184,1.341c.1.083.205.172.31.245h.067l3.237-14.3c-1.28-.081-2.527-.164-3.772-.245-4.355-.272-8.713-.535-13.066-.821-.412-.029-.524.113-.61.49-1.4,6.229-2.861,12.445-4.2,18.686a5.393,5.393,0,0,1-4.558,4.48,7.783,7.783,0,0,1-8.129-3.455,4.664,4.664,0,0,1,1.414-6.408,7.077,7.077,0,0,1,6.186-.777,8.54,8.54,0,0,1,1.767.758A17.8,17.8,0,0,1,1114.926,434.328Z"/>
    </g>
  </g>
</svg>

【讨论】：

感谢它为单个元素工作。但动画的目的是保留所有图像并仅使该元素移动。但是，当我获取您的 html 和 css 代码并添加元素周围的所有路径时，仍然是孤独的（图像的其余部分需要是静态的）