SnapSVG Safari/Firefox Rotation Bug

Question

I'm trying to animate the stroke of a circle to fill in over time. And I noticed that Safari didn't seem to be applying my transform: rotate via SnapSVG, but rotating via CSS works. IE9+ applies proper rotation. Firefox does it's own thing (backwards)

http://codepen.io/davechiu/pen/bEuar

The Blue and Red arcs should be the same (and rotating clockwise).

var s1 = new Snap('#example1');
var s2 = new Snap('#example2');
var dialRadius = 120;
var dialCircumference = Math.PI * 2 * dialRadius;
var sliver = 0.1;

var circle1 = s1.circle(150, 150, dialRadius).attr({
  id: 'circle1',
  fill: 'none',
  stroke: '#900',
  transform: 'r90,150,150',
  strokeWidth: 30,
  strokeDasharray: dialCircumference + 1,
  strokeDashoffset: dialCircumference + 1
});

var circle2 = s2.circle(150, 150, dialRadius).attr({
  id: 'circle2',
  fill: 'none',
  stroke: '#009',
  strokeWidth: 30,
  strokeDasharray: dialCircumference + 1,
  strokeDashoffset: dialCircumference + 1
});

var strokeDashOffsetBegin = dialCircumference;
var strokeDashOffsetEnd = (dialCircumference * sliver) + 0;

Snap.animate(strokeDashOffsetBegin,strokeDashOffsetEnd, function( value ){ 
  Snap('#circle1').attr({ 'strokeDashoffset': value })
}, 500, function(){
  console.log('done');
});
Snap.animate(strokeDashOffsetBegin,strokeDashOffsetEnd, function( value ){ 
  Snap('#circle2').attr({ 'strokeDashoffset': value })
}, 500, function(){
  console.log('done');
});

svg {
  height: 300px;
  width: 300px;
  
  display: inline-block;
  outline: 1px solid #CCC;
  margin: 1em;
}
svg#example2 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     id="example1"></svg>
  
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     id="example2"></svg>

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>

Chrome/MSIE Output, Red = SnapSVG Rotation, Blue = CSS Rotation Safari Output, Red = SnapSVG Rotation, Blue = CSS Rotation Firefox Output, Red = SnapSVG Rotation, Blue = CSS Rotation

Has anyone else run into this? Search seems to reveal nothing. Is this the only solve at the moment?

Behavior seems to be consistent on Safari across OSX, iOS, etc...

EDIT: I've found that I can invert the Firefox output to get it to behave like the other browsers... not ideal but consistency across browsers is good.

in CSS:

svg#example2 {
  transform: rotate(90deg); /* move this up so moz takes targeted change */
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg) scale(1,-1); /* invert mozilla output */
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

in Snap.SVG JavaScript attribute:

var circle1 = s1.circle(150, 150, dialRadius).attr({
  id: 'circle1',
  fill: 'none',
  stroke: '#900',
  transform: 'r90,150,150' + (isMoz)?' s1,-1':'', // target mozilla as you wish
  strokeWidth: 30,
  strokeDasharray: dialCircumference + 1,
  strokeDashoffset: dialCircumference + 1
});

Answer 1

U have tried with transform origin?

transform-origin: center center;