Как попеременно-обратно зациклить анимацию SVG?

Я новичок в SVG, особенно в анимации SVG, поэтому я не знаю, как это сделать. Мне нужно отменить анимацию после ее завершения и запустить ее снова. Я нашел это Как изменить направление движения SVG-анимации? и попробовал принятый ответ, но не знаю, как это сделать. Пожалуйста, помогите мне, ребята. Вот мои коды:

.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<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>
); fill: none; stroke: #000000; stroke-width: 5; stroke-miterlimit: 10; } .st4 { clip-path: url(#SVGID<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>); 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<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>); } .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<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>); 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>


svg svg-animate
person droymanz    schedule 29.12.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Этот другой вопрос описывал, как заставить анимацию работать в обратном направлении, а не в альтернативных направлениях, как вы хотите.

Анимация SMIL не включает способ автоматического изменения направления, в котором выполняется анимация.

Вам нужно специально сказать, чтобы он бежал до конца, а затем снова бежал к началу, используя что-то вроде:

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

Ключевые точки 0 в <animateMotion> означают начало пути движения, а 1 означает конец пути движения.

person Paul LeBeau    schedule 29.12.2016