<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();
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.