<div>
  animate.repeatCount：
  <label><input type="radio" name="repeatCount" value="1" checked onchange="onRepeatCountChange(arguments[0])" />1</label>
  <label><input type="radio" name="repeatCount" value="2"  onchange="onRepeatCountChange(arguments[0])" />2</label>
  <label><input type="radio" name="repeatCount" value="3"  onchange="onRepeatCountChange(arguments[0])" />3</label>
  <label><input type="radio" name="repeatCount" value="4"  onchange="onRepeatCountChange(arguments[0])" />4</label>
  <label><input type="radio" name="repeatCount" value="indefinite"  onchange="onRepeatCountChange(arguments[0])" />indefinite</label>
</div>
<div id="animate.fill">
  animate.fill：
  <label><input type="radio" name="fill" value="remove" checked onchange="onFillChange(arguments[0])" />remove</label>
  <label><input type="radio" name="fill" value="freeze" onchange="onFillChange(arguments[0])" />freeze</label>
</div>
<br>

<svg width="200" height="200" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    svg {
      outline: 1px solid red;
    }
  </style>
  <circle cy="50%" r="10%">
    <animate id="myAnimate" attributeName="cx" from="10%" to="90%" dur="1s" repeatCount="1" fill="remove" />
  </circle>
</svg>

function onRepeatCountChange(e) {
  const myAnimate = document.getElementById("myAnimate");
  myAnimate.setAttribute("repeatCount", e.target.value);
  myAnimate.beginElement();
  const animateFillDiv = document.getElementById("animate.fill");
  if (e.target.value === "indefinite") {
    animateFillDiv.style.display = "none";
  } else {
    animateFillDiv.style.display = "block";
  }
}
function onFillChange(e) {
  const myAnimate = document.getElementById("myAnimate");
  myAnimate.setAttribute("fill", e.target.value);
  myAnimate.beginElement();
}