svg - 如何交替反向循环 SVG 动画？

Question

我对 SVG 特别是 SVG 动画很陌生，所以我不知道该怎么做。我需要在动画完成后反转它并重新开始。我找到了这个 How to reverse the moving direction of the SVG animation? 并尝试了接受的答案，但我不知道该怎么做。请帮助我。这是我的代码:

.s0 {
  overflow: visible;
}
.st0 {
  clip-path: url(#SVGID_6_);
  fill: #FF0500;
}
.st1 {
  opacity: 0.6;
  fill: #FF0500;
}
.st2 {
  clip-path: url(#SVGID_8_);
  fill: #FF0500;
}
.st3 {
  clip-path: url(#SVGID_2_);
  fill: none;
  stroke: #000000;
  stroke-width: 5;
  stroke-miterlimit: 10;
}
.st4 {
  clip-path: url(#SVGID_2_);
  fill: none;
  stroke: #000000;
  stroke-width: 5;
  stroke-linejoin: bevel;
  stroke-miterlimit: 10;
}
.st5 {
  opacity: 0.6;
  clip-path: url(#SVGID_4_);
}
.st6 {
  opacity: 0.7;
  clip-path: url(#SVGID_4_);
}
.st7 {
  clip-path: url(#SVGID_2_);
}
.st8 {
  clip-path: url(#SVGID_10_);
  fill: #FF0500;
}
.st9 {
  opacity: 0.65;
  fill: #FF0500;
}
.st10 {
  opacity: 0.7;
  fill: #FF0500;
}
.st11 {
  clip-path: url(#SVGID_2_);
  fill: #FFFFFF;
}
.st12 {
  opacity: 0.59;
  clip-path: url(#SVGID_4_);
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="75px" height="100px" viewBox="0 0 75 100" xml:space="preserve" enable-background="new 0 0 75 100">
  <defs>
    <rect id="SVGID_1_" x="-121" y="-27.388" width="317.829" height="150.388" />
  </defs>
  <clipPath id="SVGID_2_">
    <use xlink:href="#SVGID_1_" overflow="visible" />
  </clipPath>
  <polygon class="st11" points="26.344 95.133 4.813 78.661 4.813 41.538 26.344 41.538 " />
  <polygon class="st3" points="26.344 95.133 4.813 78.661 4.813 41.538 26.344 41.538 " />
  <polygon class="st11" points="56.376 41.538 5.345 6.038 5.345 28.817 56.376 64.317 " />
  <polygon class="st4" points="56.376 41.538 5.345 6.038 5.345 28.817 56.376 64.317 " />
  <rect x="4.813" y="6.039" class="st11" width="67.095" height="22.779" />
  <rect x="4.813" y="41.539" class="st11" width="52.095" height="22.779" />
  <rect x="4.813" y="41.539" class="st3" width="52.095" height="22.779" />
  <rect x="10.545" y="69.081" class="st7" width="11.154" height="1.538" />
  <rect x="9.375" y="72.719" class="st7" width="13.071" height="1.538" />
  <rect x="10.334" y="76.247" class="st7" width="11.154" height="1.538" />
  <rect x="10.946" y="10.692" class="st7" width="1.538" height="13.07" />
  <rect x="14.476" y="11.851" class="st7" width="1.538" height="11.154" />
  <rect x="18.113" y="10.892" class="st7" width="1.538" height="13.071" />
  <rect x="21.643" y="12.052" class="st7" width="1.538" height="11.154" />
  <rect x="25.241" y="10.993" class="st7" width="1.538" height="13.071" />
  <rect x="28.771" y="12.153" class="st7" width="1.538" height="11.154" />
  <rect x="32.408" y="11.195" class="st7" width="1.538" height="13.071" />
  <rect x="35.938" y="12.355" class="st7" width="1.538" height="11.154" />
  <rect x="39.294" y="11.296" class="st7" width="1.539" height="13.071" />
  <rect x="42.824" y="12.456" class="st7" width="1.539" height="11.154" />
  <rect x="46.461" y="11.497" class="st7" width="1.538" height="13.071" />
  <rect x="49.991" y="12.657" class="st7" width="1.538" height="11.154" />
  <rect x="53.53" y="11.396" class="st7" width="1.538" height="13.071" />
  <rect x="57.059" y="12.557" class="st7" width="1.539" height="11.154" />
  <rect x="60.696" y="11.497" class="st7" width="1.538" height="13.071" />
  <rect x="64.226" y="12.758" class="st7" width="1.538" height="11.154" />
  <rect x="10.124" y="47.351" class="st7" width="1.538" height="11.154" />
  <rect x="13.76" y="46.393" class="st7" width="1.538" height="13.07" />
  <rect x="17.29" y="47.552" class="st7" width="1.538" height="11.154" />
  <rect x="26.898" y="26.956" transform="matrix(0.4983 0.867 -0.867 0.4983 42.4791 -7.5061)" class="st7" width="1.654" height="11.991" />
  <rect x="31.527" y="30.615" transform="matrix(0.4981 0.8671 -0.8671 0.4981 46.7432 -10.3986)" class="st7" width="1.654" height="9.125" />
  <rect x="36.135" y="33.386" transform="matrix(0.4981 0.8671 -0.8671 0.4981 51.2 -13.153)" class="st7" width="1.654" height="8.53" />
  <rect x="21.831" y="27.194" transform="matrix(0.4983 0.867 -0.867 0.4983 38.3092 -4.0545)" class="st7" width="1.654" height="7.76" />
  <rect x="41.997" y="37.781" transform="matrix(0.4983 0.867 -0.867 0.4983 56.1469 -17.0713)" class="st7" width="1.654" height="4.397" />
  <rect x="4.813" y="6.039" class="st3" width="67.095" height="22.779" />
  <rect x="20.889" y="47.552" class="st7" width="1.538" height="11.154" />
  <rect x="24.525" y="46.595" class="st7" width="1.538" height="13.07" />
  <rect x="28.055" y="47.754" class="st7" width="1.538" height="11.154" />
  <rect x="31.585" y="47.754" class="st7" width="1.538" height="11.154" />
  <rect x="35.168" y="46.594" class="st7" width="1.538" height="13.071" />
  <rect x="38.752" y="47.956" class="st7" width="1.538" height="11.154" />
  <rect x="42.109" y="47.956" class="st7" width="1.538" height="11.154" />
  <rect x="45.745" y="46.595" class="st7" width="1.538" height="13.07" />
  <rect x="49.275" y="47.956" class="st7" width="1.538" height="11.154" />
  <rect x="16.277" y="80.391" transform="matrix(-0.0035 1 -1 -0.0035 101.7282 67.8725)" class="st7" width="1.538" height="8.465" />
  <rect x="9.582" y="79.94" class="st7" width="13.071" height="1.537" />

  <!-- CLIPPINGS -->
  <defs>
    <!-- 1st -->
    <clipPath id="cliptop">
      <rect x="7" y="8" width="64" height="19" />
    </clipPath>

    <!-- 2nd -->
    <clipPath id="clip2">
      <polygon points="37.2,31 50.1,39.02 24,39.02 12.6,31" />
    </clipPath>

    <!-- 3rd -->
    <clipPath id="clip3">
      <rect width="47.6" height="17.75" x="7" y="44" fill="yellow" fill-opacity="0.9"></rect>
    </clipPath>

    <!-- Last -->
    <clipPath id="clip4">
      <polygon points="23.84 90.133 7.32 77.661 7.32 66.7 23.84 66.7 " fill="green" fill-opacity="0.8" />
    </clipPath>
  </defs>

  <!-- SCANNERS -->

  <!-- 1st -->
  <g class="st7" style="clip-path: url(#cliptop)">
    <defs>
      <rect id="SVGID_3_" x="-121" y="-27.388" width="317.829" height="150.388" />
    </defs>
    <clipPath id="SVGID_4_">
      <use xlink:href="#SVGID_3_" overflow="visible" />
    </clipPath>
    <g class="st5">
      <animateMotion id="scan_1_1" to="-64,0" begin="0s; scan_4_1.end + 1s" dur="1.5s" fill="freeze" />
      <defs>
        <rect id="SVGID_5_" x="59.452" y="8.488" width="7.473" height="17.88" />
      </defs>
      <clipPath id="SVGID_6_">
        <use xlink:href="#SVGID_5_" overflow="visible" />
      </clipPath>
      <rect x="59.451" y="8.488" class="st0" width="7.474" height="17.88" />
    </g>
    <g class="st12">
      <animateMotion id="scan_1_2" to="-64,0" begin="0s; scan_4_2.end + 1s" dur="1.5s" fill="freeze" />
      <defs>
        <rect id="SVGID_7_" x="61.938" y="8.488" width="7.473" height="17.88" />
      </defs>
      <clipPath id="SVGID_8_">
        <use xlink:href="#SVGID_7_" overflow="visible" />
      </clipPath>
      <rect x="61.937" y="8.488" class="st2" width="7.475" height="17.88" />
    </g>
    <g class="st6">
      <animateMotion id="scan_1_3" to="-64,0" begin="0s; scan_4_3.end + 1s" dur="1.5s" fill="freeze" />
      <defs>
        <rect id="SVGID_9_" x="60.695" y="8.488" width="7.473" height="17.88" />
      </defs>
      <clipPath id="SVGID_10_">
        <use xlink:href="#SVGID_9_" overflow="visible" />
      </clipPath>
      <rect x="60.694" y="8.488" class="st8" width="7.474" height="17.88" />
    </g>
  </g>

  <!-- 2nd -->
  <g class="st7" style="clip-path: url(#clip2)">
    <polygon class="st9" points="30.601 26.583 36.285 30.564 12.267 30.564 6.581 26.583 " y="-7">
      <animateMotion id="scan_2_1" to="17.75,12.5" dur="1s" begin="scan_1_1.end" fill="freeze" />
    </polygon>
    <polygon class="st9" points="31.814 27.352 37.5 31.333 13.481 31.333 7.795 27.352 " y="-7">
      <animateMotion id="scan_2_2" to="17.75,12.5" dur="1s" begin="scan_1_2.end" fill="freeze" />
    </polygon>
    <polygon class="st9" points="31.117 26.928 36.802 30.909 12.784 30.909 7.098 26.928 " y="-7">
      <animateMotion id="scan_2_3" to="17.75,12.5" dur="1s" begin="scan_1_3.end" fill="freeze" />
    </polygon>
  </g>

  <!-- 3rd -->
  <g class="st7" style="clip-path:url(#clip3);">
    <rect x="54.368" y="43.988" class="st1" width="7.474" height="17.88">
      <animateMotion id="scan_3_1" to="-57.5,0" dur="1.5s" begin="scan_2_1.end" fill="freeze" />
    </rect>
    <rect x="56.854" y="43.988" class="st10" width="7.475" height="17.88">
      <animateMotion id="scan_3_2" to="-57.5,0" dur="1.5s" begin="scan_2_2.end" fill="freeze" />
    </rect>
    <rect x="55.611" y="43.988" class="st10" width="7.474" height="17.88">
      <animateMotion id="scan_3_3" to="-57.5,0" dur="1.5s" begin="scan_2_3.end" fill="freeze" />
    </rect>
  </g>

  <!-- Last -->
  <g class="st7" style="clip-path:url(#clip4);">
    <rect x="7.324" y="59.351" class="st1" width="16.53" height="7.474">
      <animateMotion id="scan_4_1" to="0,33" dur="1.5s" begin="scan_3_1.end" fill="freeze" />
    </rect>
    <rect x="7.324" y="56.864" class="st10" width="16.53" height="7.475">
      <animateMotion id="scan_4_2" to="0,33" dur="1.5s" begin="scan_3_2.end" fill="freeze" />
    </rect>
    <rect x="7.324" y="58.107" class="st10" width="16.53" height="7.474">
      <animateMotion id="scan_4_3" to="0,33" dur="1.5s" begin="scan_3_3.end" fill="freeze" />
    </rect>
  </g>
</svg>

Answer 1

另一个问题是描述如何使动画向后运行，而不是像您想要的那样交替方向。

SMIL 动画不包含自动改变动画运行方向的方法。

您需要明确告诉它运行到末尾，然后使用类似以下内容再次运行回开头:

keyPoints="0;1;0" keyTimes="0;0.5;1"

关键点0在 <animateMotion>表示运动路径的开始，1表示运动路径的终点。