SVG直线动画

Question

我有红色和蓝色两条线，其中蓝线沿着红线移动。我希望蓝线在红色 line.Here 上上下移动，它只向上移动。下面是代码

<!DOCTYPE html>
<html>
<head><title></title>

</head>
<body>
 <svg height="210" width="500">
 <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
 <line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2">
  <animateTransform attributeName="transform"
      type="translate"
      from="200 200"
      to="-150 -150"
      begin="0s"
      dur="5s"
      repeatCount="indefinite"
    />
 </line>
 </svg>


 
</body>
</html>

Answer 1

也许是这样的？

<!DOCTYPE html>
<html>
<head><title></title>

</head>
<body>
 <svg height="210" width="500">
 <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
 <line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2">
  <animateTransform attributeName="transform"
      type="translate"
      values="200 200;-150 -150;200 200"
      begin="0s"
      dur="5s"
      repeatCount="indefinite"
    />
 </line>
 </svg>


 
</body>
</html>

SVG直线动画

SVG straight line animation

svg

css-animations

svg-animate