我仍在学习 SMIL,让我烦恼的一件事是不支持自动反转动画。所以这是我的测试 SVG 我快速创建了测试 SVG 位置动画的目的。
以最简单的形式,我希望动画在到达终点时反转回其原始起始位置,就像 CSS 动画的alternate
工作方式一样。
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 82">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 2px;
}
</style>
</defs>
<title>Untitled-5</title>
<line class="cls-1" x1="12" y1="70" x2="44" y2="12">
<animate class="anim_1" attributeName="y1" from="70" to="35" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="x2" from="44" to="59" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="y2" from="12" to="56" dur="2s" repeatCount="indefinite"/>
</line>
<line class="cls-1" x1="44" y1="12" x2="112" y2="45">
<animate class="anim_1" attributeName="x1" from="44" to="59" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="y1" …
Run Code Online (Sandbox Code Playgroud)