SnapSVG Safari/Firefox Rotation Bug

Question

Я пытаюсь оживить ход круга, чтобы заполнить его со временем. И я заметил, что Safari, похоже, не применяет мое преобразование: вращайтесь через SnapSVG, но работает с помощью CSS. IE9 + применяет правильное вращение. Firefox делает это собственное дело (в обратном направлении)

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

Синие и красные дуги должны быть одинаковой (и вращения по часовой стрелке).

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>

хром/MSIE выход, красный = SnapSVG вращение, Синий = CSS Вращение Safari выход, красный = SnapSVG вращение, Синий = CSS Rotation Firefox выход, красный = SnapSVG Rotation, Blue = CSS Вращение

Неужели кто-нибудь еще сталкивается с этим? Поиск, кажется, ничего не показывает. Это единственная проблема на данный момент?

поведение, кажется, соответствует на сафари через OSX, IOS, и т.д ...

EDIT: Я обнаружил, что я могу инвертировать выход Firefox, чтобы заставить его вести себя как другие браузеры .. не идеальная, но согласованность между браузерами хорошая.

в 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); 
} 

в Snap.SVG атрибуте JavaScript:

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 попытались с преобразованием координат?

transform-origin: center center;