SVG Smil Interactive 2

<!doctype html>
<title>Example</title>
<svg width="300" height="300" viewBox="0 0 100 100">
  <style>
    .btn { cursor: pointer; }
  </style>

<rect x="30" y="20" width="40" height="20" rx="10" fill="#eee" />
  
  
  <rect id="btnOn" x="30" y="20" width="40" height="20" rx="10" fill="transparent" class="btn">
    <set attributeName="display" to="none" begin="btnOn.click" />
    <set attributeName="display" to="block" begin="btnOff.click" />
  </rect>

<rect id="btnOff" x="30" y="20" width="40" height="20" rx="10" fill="transparent" display="none" class="btn">
    <set attributeName="display" to="none" begin="btnOff.click" />
    <set attributeName="display" to="block" begin="btnOn.click" />
  </rect>

<circle cx="40" cy="30" r="7" fill="#999" pointer-events="none">
    
    <animate attributeName="cx" from="40" to="60" dur="0.2s" begin="btnOn.click" fill="freeze" />
    <animate attributeName="fill" from="#999" to="limegreen" dur="0.2s" begin="btnOn.click" fill="freeze" />
    
    
    <animate attributeName="cx" from="60" to="40" dur="0.2s" begin="btnOff.click" fill="freeze" />
    <animate attributeName="fill" from="limegreen" to="#999" dur="0.2s" begin="btnOff.click" fill="freeze" />
  </circle>

<text x="50" y="55" font-size="5" text-anchor="middle" font-family="sans-serif">True Toggle (Click to On/Off)</text>
</svg>