SVG Animation Assistance Needed

Question

Could I get some help from somebody that feels comfortable in SVG animations? I've been trying to animate a Japanese flag to move across the width of the screen on my page, but have been having some trouble figuring it out.

Here's what I have for relevant code:
<svg width="800" height="200">
<rect id="flag_base" width="300" height="175" fill="white" stroke="black" stroke-width="2" />
<circle id="flag_cir" cx="150" cy="87" fill="#990033" r="60" stroke="black" stroke-width="1" />
<animate xlink:href="flag_base" attributeName="x" from="0" to="500" dur="5s" begin="2s" repeatCount="indefinite" />
<animate xlink:href="flag_cir" attributeName="cx" from="150" to="650" dur="5s" begin="2s" repeatCount="indefinite" />
</svg>

I'm trying to program it to move along the x-axis, but it's not moving at all. What am I missing here? Also, I have been sorta perusing through https://css-tricks.com/guide-svg-animations-smil/ as I've been working on it, trying to understand more than what SoloLearn has on the subject, but I honestly have not read that entire (long) guide. Yet.

Link to my webpage for which I'm working on this code: https://code.sololearn.com/W7Z9y7o3jV4R

Answer 1

Just add an hashtag (#) before the id name in the 'xlink:href' attribute: xlink:href="#flag_base" instead of xlink:href="flag_base" (and obviously same for the second one: xlink:href="#flag_cir") ;)

Answer 2

@visph Hur dur! I can't believe I missed that. Thank you!