SnapSVG Safari/Firefox 회전 버그

Question

시간이 지남에 따라 채우기 위해 원의 선을 움직이려고합니다. Safari가 SnapSVG를 통해 회전하지만 CSS를 통해 회전하면 내 변형이 적용되지 않는 것으로 나타났습니다. IE9 +는 적절한 회전을 적용합니다. 파이어 폭스는 블루와 레드 호는 같은 (및 회전 시계 방향으로)해야

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 회전 사파리 출력, 빨간색 = SnapSVG 회전, 블루 = CSS 회전 파이어 폭스 출력, 빨간색 = SnapSVG 회전, 파란색 = CSS 회전

누구도이 문제에 부딪 혔습니까? 수색은 아무 것도 밝히지 않는 것 같습니다. 이것이 유일한 해결책입니까?

행동

편집 ... 등 OSX, 아이폰 OS,에서 사파리에 일관성이 보인다 : 나는 그것이 다른 브라우저처럼 행동하는 얻을 수있는 파이어 폭스의 출력을 반전 할 수 있습니다 것으로 나타났습니다 .. 이상적이지는 않지만 브라우저 간 일관성이 좋습니다. CSS에서

: Snap.SVG 자바 스크립트 속성에

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

는 :

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;