SnapSVG Safari浏览器/ Firefox旋转错误

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旋转 火狐输出，红色= SnapSVG旋转，蓝色= CSS旋转

是否有其他人遇到过这种情况？搜索似乎没有任何结果。这是目前唯一的解决方案吗？

行为似乎是跨OSX，iOS的，Safari浏览器等...一致

编辑：我发现，我能反转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;