Is there a way to make an SVG figure rotate around its center? I have been trying to calculate the rotation center and scale it based on the viewBox. It seems to work perfectly fine in Chrome, Firefox, and Safari, but I just can't seem to get it to work in Internet Explorer. I've played around with the preserveAspectRatio attribute, double-checked my values, but nothing seems to fix it ... Any suggestions?
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<svg version="1.1" id="sketch" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1332 1080" style="enable-background:new 0 0 1332 1080;" preserveAspectRatio="xMinYMin slice">
<g id="wheel1">
<g>
<path class="st8" d="M258.4,149c-123.7,0-224,100.3-224,224s100.3,224,224,224s224-100.3,224-224S382.1,149,258.4,149z M258.9,533
c-88.4,0-160-71.6-160-160s71.6-160,160-160s160,71.6,160,160S347.2,533,258.9,533z"/>
<g>
<polyline class="st9" points="258.5,149 282,181 258.5,213 "/>
</g>
</g>
</svg>
<script type="text/javascript">
var svg = document.getElementById('sketch')
var wheel = document.getElementById('wheel1')
var svgBBox = svg.getBoundingClientRect()
var wheelBBox = wheel.getBoundingClientRect()
// Calculate rotation center of the wheel
var cx = (wheelBBox.left - svgBBox.left) + wheelBBox.width / 2
var cy = (wheelBBox.top - svgBBox.top) + wheelBBox.height / 2
// Calculate scaling ratio based on viewBox / viewport
var viewBox = svg.getAttribute('viewBox').split(' ').map(function(v) { return parseInt(v, 10) })
var ratioX = viewBox[2] / svgBBox.width
var ratioY = viewBox[3] / svgBBox.height
var t0 = Date.now()
// Rotation loop
setInterval(function() {
var delta = (Date.now() - t0)
wheel.setAttribute('transform', 'rotate(' + delta * 0.05 + ', ' + (cx * ratioX) + ', ' + (cy * ratioY) + ')')
}, 10)
</script>
<style type="text/css">
.st9 { fill: yellow; }
</style>
</body>
</html>