如何交替反向循环 SVG 动画？
How to alternate-reverse loop an SVG animation?
我是 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_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>
另一个问题描述了如何使动画 运行 向后，而不是像你想的那样交替方向。
SMIL 动画不包括自动改变动画 运行 的方向的方法。
你需要明确地告诉它 运行 结束然后 运行 回到开始使用像这样的东西：
keyPoints="0;1;0" keyTimes="0;0.5;1"
keyPoints 0 in an <animateMotion>表示运动路径的开始，1表示运动路径的结束。
我是 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_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>
另一个问题描述了如何使动画 运行 向后，而不是像你想的那样交替方向。
SMIL 动画不包括自动改变动画 运行 的方向的方法。
你需要明确地告诉它 运行 结束然后 运行 回到开始使用像这样的东西：
keyPoints="0;1;0" keyTimes="0;0.5;1"
keyPoints 0 in an <animateMotion>表示运动路径的开始，1表示运动路径的结束。