小编Vic*_*und的帖子

SVG倒车动画

我仍在学习 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)

css animation svg smil

0
推荐指数
1
解决办法
1191
查看次数

标签 统计

animation ×1

css ×1

smil ×1

svg ×1