<div id="set.fill">
  set.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 id="mySvg" width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <style>
    .round {
      rx: 50%;
    }
  </style>
  <rect id="myRect" x="10%" y="10%" width="80%" height="80%">
    <set id="mySet" attributeName="class" to="round" begin="myRect.click" dur="2s" />
  </rect>
</svg>
function onFillChange(e) {
  const mySet = document.getElementById("mySet");
  mySet.setAttribute("fill", e.target.value);
  mySet.beginElement();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.