动画 css svg 泵

Question

有人可以帮助我对 svg 进行胺化吗？我正在尝试创建泵叶轮的动画。我想要的是让 svg 的最后 4 个元素产生旋转叶轮效果。让它看起来像在旋转。真正的效果是将元素提升一个位置，而留在上方的元素出现在下方，依此类推。我不知道该怎么做。非常感谢

Image svg

icon_return_pump_1:
  styles:
    custom_fields:
      icon:
        - margin-left: -15%
  custom_fields:
    icon: >
      [[[        
        let state = 'on';
        return `
          <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="55.000000pt" height="55.000000pt" viewBox="0 0 512.000000 512.000000"  preserveAspectRatio="xMidYMid meet">
            <style>
              .start {
              }
              .on {
              }
              .end {
              }
              .start_timeout {
              }
              .end_timeout {
              }


              @keyframes on {
                0% {
                  transform: scale(0.5);
                }
                20% {
                  transform: scale(1);
                }
                40% {
                  transform: scale(1);
                }
                60% {
                  transform: scale(1);
                }
                80% {
                  transform: scale(1);
                }
                100% {
                  transform: scale(1);
                }
              }
              .on {
                animation: on 0.8s;
                transform-origin: center;
              }
            </style>
            <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> 
            <path fill="#9da0a2" d="M895 4466 c-37 -17 -70 -52 -84 -89 -6 -16 -11 -78 -11 -138 0 -105 2 -113 39 -202 43 -100 85 -235 96 -310 l7 -47 498 0 498 0 7 47 c11 75 53 210 96 312 l41 94 -4 123 c-3 133 -10 153 -72 198 -27 21 -40 21 -554 23 -424 2 -533 0 -557 -11z"/> 
            <path fill="#9da0a2" d="M960 2400 l0 -1120 160 0 160 0 0 -80 0 -79 -429 -3 c-416 -3 -430 -4 -457 -24 -64 -47 -69 -63 -69 -214 0 -151 5 -167 69 -214 l27 -21 2139 0 2139 0 27 21 c64 47 69 63 69 214 0 151 -5 167 -69 214 -27 20 -40 21 -537 24 l-509 3 0 159 0 160 160 0 160 0 0 80 0 80 -480 0 -480 0 0 -80 0 -80 160 0 160 0 0 -160 0 -160 -880 0 -880 0 0 80 0 80 160 0 160 0 0 1120 0 1120 -480 0 -480 0 0 -1120z"/>
            <path fill="#9da0a2" d="M2238 3439 l-158 -79 0 -960 0 -960 160 -80 160 -80 0 1120 c0 616 -1 1120 -2 1119 -2 0 -74 -36 -160 -80z"/> 
            <path fill="#9da0a2" d="M2560 2400 l0 -1120 160 80 160 80 0 960 0 960 -160 80 -160 80 0 -1120z"/>
            <path fill="#9da0a2" d="M415 3346 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -406 -3 -864 3 -822 3 -832 24 -859 39 -53 71 -69 134 -69 63 0 95 16 134 69 18 23 22 45 24 137 l4 109 79 0 79 0 0 640 0 640 -79 0 -79 0 -4 109 c-3 118 -12 141 -70 184 -33 25 -113 32 -153 13z"/>
            <path fill="#9da0a2" d="M3040 3280 l0 -80 480 0 480 0 0 80 0 80 -480 0 -480 0 0 -80z"/>
            <path fill="#9da0a2" d="M4160 2400 l0 -960 33 0 c65 1 174 31 257 71 164 81 297 253 335 434 11 54 15 155 15 455 0 439 -4 474 -71 610 -58 118 -161 221 -279 279 -83 40 -192 70 -257 71 l-33 0 0 -960z"/>
            <path class="${state}" fill="#9da0a2" d="M3040 2880 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
            <path class="${state}" fill="#9da0a2" d="M3040 2400 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
            <path class="${state}" fill="#9da0a2" d="M3040 1920 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
            </g>
          </svg>
        `;
      ]]]

Answer 1

这就是我的做法：我会用带有 stroke-dasharay 的非常粗的线条替换这些路径，然后为线条的 stroke-dashoffset 设置动画。

@keyframes on {

  100% {
    stroke-dashoffset:1920
  }
}
.on {
  animation: on 0.8s infinite;
}

<svg viewBox="0 0 512.000000 512.000000"width="200" >
  <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#9da0a2"  stroke="none">
    <path d="M895 4466 c-37 -17 -70 -52 -84 -89 -6 -16 -11 -78 -11 -138 0 -105 2 -113 39 -202 43 -100 85 -235 96 -310 l7 -47 498 0 498 0 7 47 c11 75 53 210 96 312 l41 94 -4 123 c-3 133 -10 153 -72 198 -27 21 -40 21 -554 23 -424 2 -533 0 -557 -11z" />
    <path  d="M960,2400L960,1280L1120,1280L1280,1280L1280,1200L1280,1121L851,1118C435,1115,421,1114,394,1094C330,1047,325,1031,325,880C325,729,330,713,394,666L421,645L2560,645L4699,645L4726,666C4790,713,4795,729,4795,880C4795,1031,4790,1047,4726,1094C4699,1114,4686,1115,4189,1118L3680,1121L3680,1280L3680,1440L3040,1440L3200,1440L3360,1440L3360,1280L3360,1120L2480,1120L1600,1120L1600,1200L1600,1280L1760,1280L1920,1280L1920,2400L1920,3520L1440,3520L960,3520L960,2400Z" />
    <path d="M2238 3439 l-158 -79 0 -960 0 -960 160 -80 160 -80 0 1120 c0 616 -1 1120 -2 1119 -2 0 -74 -36 -160 -80z" />
    <path d="M2560 2400 l0 -1120 160 80 160 80 0 960 0 960 -160 80 -160 80 0 -1120z" />

    <path d="M4160 2400 l0 -960 33 0 c65 1 174 31 257 71 164 81 297 253 335 434 11 54 15 155 15 455 0 439 -4 474 -71 610 -58 118 -161 221 -279 279 -83 40 -192 70 -257 71 l-33 0 0 -960z" />
    <path d="M415 3346 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -406 -3 -864 3 -822 3 -832 24 -859 39 -53 71 -69 134 -69 63 0 95 16 134 69 18 23 22 45 24 137 l4 109 79 0 79 0 0 640 0 640 -79 0 -79 0 -4 109 c-3 118 -12 141 -70 184 -33 25 -113 32 -153 13z"/>


    <path class="on" stroke="#9da0a2" stroke-width="970" d="M3530 3360V1440" stroke-dasharray="250 150" />

  </g>
</svg>

观察：我修改了第二条路径，因为我想删除与旋转引擎对应的位。

动画 css svg 泵

Animation css svg pump

css

animation

svg

css-animations