没问题，这两个需求都很容易实现，我来一步步给你讲清楚：

1. 实现矩形斜向移动动画 #

你现在的动画只修改了x属性，所以矩形只会水平移动。要实现斜向移动，只需要同时给y属性也添加一个动画就可以了——让矩形在水平移动的同时，也垂直移动，两者结合就是斜向路径。

比如我们让矩形从(0,0)移动到(300, 100)，就可以在<rect>标签里再添加一个<animate>元素来控制y属性的变化：

<svg width="1000" height="250">
  <rect width="150" height="150" fill="orange">
    <!-- 水平方向动画 -->
    <animate attributeName="x" from="0" to="300" dur="3s" fill="freeze"/>
    <!-- 垂直方向动画 -->
    <animate attributeName="y" from="0" to="100" dur="3s" fill="freeze"/>
  </rect>
</svg>

这里两个动画的dur（持续时间）保持一致，就能保证移动轨迹是直线斜向的。如果想调整斜向角度，只需要修改y属性的to值就行。

2. 让动画无限重复 #

要实现无次数限制的重复动画，只需要把repeatCount属性的值从原来的2改成indefinite就可以了——这个值就是专门用来指定动画无限循环的。

把上面的斜向移动动画和无限重复结合起来，完整代码如下：

<svg width="1000" height="250">
  <rect width="150" height="150" fill="orange">
    <animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="indefinite"/>
    <animate attributeName="y" from="0" to="100" dur="3s" fill="freeze" repeatCount="indefinite"/>
  </rect>
</svg>

注意要给两个<animate>都加上repeatCount="indefinite"，这样水平和垂直方向的动画会同步无限循环。

内容的提问来源于stack exchange，提问作者user9585869