В begin добавьте Условие для паузы: begin="Down.end +2s"
<animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform"
type="translate" from="100,150" to="-100,150" fill="freeze"/>
update
Цитата из комментария автора вопроса
Делал также с +2s, но у меня почему-то квадрат на эти 2 секунды
возвращался в начальную позицию. А приведённый код работает как нужно.
Это происходит из-за то, что анимационная картинка по окончании анимации возвращается к первому кадру анимации.
Чтобы "заморозить" последний кадр анимации и перейти с этого же места расположения к другой анимации перемещения необходимо добавить: fill="freeze"
<svg version = "1.1" baseProfile="full"
xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"
height = "600px" width = "800px" >
<g>
<animateTransform id="Down" begin="0s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150" fill="freeze"/>
<animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150" fill="freeze"/>
<animateTransform id="Up" begin="Left.end +2s" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0" fill="freeze" />
<rect id = "romb" x="200" y="100" fill="green" width="20" height="20"/>
</g>
</svg>
Если нужно зациклить анимацию, то для первой анимации id="Down"
условие запуска будет begin="0s;Up.end+2s"
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version = "1.1" baseProfile="full"
xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"
height = "600px" width = "800px" >
<g>
<animateTransform id="Down" begin="0s;Up.end+2s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150" fill="freeze"/>
<animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150" fill="freeze"/>
<animateTransform id="Up" begin="Left.end +2s" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0" fill="freeze" />
<rect id = "romb" x="200" y="100" fill="green" width="20" height="20"/>
</g>
</svg>
Время анимации и пазы между ними установите по своему вкусу
UPDATE
При желании можно добавить вращение прямоугольнику.
Для этого добавляется ещё одна анимация:
<rect id = "romb" x="200" y="100" fill="green" width="20" height="20">
<animateTransform id="an_rotate" begin="0s" dur="0.8s"
attributeName="transform" type="rotate" from="0" to="360"
repeatCount="indefinite" />
</rect>
#romb {
transform-origin:center;
transform-box:fill-box;
}
<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
height = "600px" width = "800px" >
<g>
<animateTransform id="Down" begin="0s;Up.end+2s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150" fill="freeze"/>
<animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150" fill="freeze"/>
<animateTransform id="Up" begin="Left.end +2s" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0" fill="freeze" />
<rect id = "romb" x="200" y="100" fill="green" width="20" height="20">
<animateTransform id="an_rotate" begin="0s" dur="0.8s" attributeName="transform" type="rotate" from="0" to="360" repeatCount="indefinite" />
</rect>
</g>
</svg>