Why is this JS generated SVG <animate> not working in Chrome?

Consider this simple SVG SMIL animation:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100">
  <circle r="40" fill="red">
    <animate
      attributeType="CSS" begin="click"
      attributeName="fill" to="blue" dur="0.3s" fill="freeze"/>
  </circle>
</svg>

      

        
        
        
      

    

This works correctly in Chrome v18 on Windows (modulo color preservation bug):
http://phrogz.net/svg/change-color-on-click-simple.svg

When I generate the element <animate>

using JavaScript everything works fine in Firefox, Safari and Opera, but not in Chrome. In Chrome, nothing happens when I click on the circle.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100">
  <circle r="40" fill="red"/>
  <script>
    var c = document.querySelector('circle');
    createOn(c,'animate',{
      attributeType:'CSS', begin:'click',
      attributeName:'fill', to:'blue',
      dur:'0.3s', fill:'freeze'
    });
    function createOn(el,name,attrs){
      var e = el.appendChild(document.createElementNS(el.namespaceURI,name));
      for (var name in attrs) e.setAttribute(name,attrs[name]);
      return e;
    }
  </script>

      

        
        
        
      

    

See this JavaScript version here:
http://phrogz.net/svg/change-color-on-click-simple-js.svg

There are no script errors in the console. The content of the first example was actually created by selecting Copy As HTML from the Chrome developer tools after downloading the second example, so I know it is generating the correct attribute names and values. The element namespaceURI

element is the <animate>

same as both (SVG namespace), as well as namespaceURI

all attributes ( null

).   

Is there a way to make JS generated elements <animate>

work in Chrome?