Robust solution to dynamically transform SVG

Robust solution to dynamically transform SVG

Apparently, IE10 does not support CSS transformations for SVGs, only
attribute transformations like so (JSFIDDLE):
<svg><rect id="myrect" width="200" height="200"></rect></svg>

setTimeout(function()
{
var r = document.getElementById("myrect")
//works in IE
//r.setAttribute("transform","scale(1.5)")
//does not work in IE
r.style.transform = r.style.WebkitTransform = "scale(1.5)"
},1000);
Where supported, I want to include a smooth transition:
#myrect { transition: all 1s; }
The way I see it, a smooth transitions requires a CSS transformation,
whereas IE requires an attribute transformation.
So what's the best strategy? Test for IE, then if IE use an attribute
transformation, else use a CSS transformation?
Any thoughts much appreciated!