SnapSVG Safari瀏覽器/ Firefox旋轉錯誤

我正在嘗試製作一段時間內填充的筆劃動畫。我注意到Safari似乎沒有應用我的轉換：通過SnapSVG旋轉，但通過CSS旋轉工作。 IE9 +應用適當的旋轉。 Firefox沒有它自己的事情（向後）SnapSVG Safari瀏覽器/ 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旋轉 Chrome Output, Red = SnapSVG Rotation, Blue = CSS Rotation Safari的輸出，紅色= SnapSVG旋轉，藍色= CSS旋轉 Safari Output, Red = SnapSVG Rotation, Blue = CSS Rotation 火狐輸出，紅色= 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 
});

來源

2014-09-27 Dave Chiu

U均具有與轉換原點試過嗎？

transform-origin: center center;

來源

2014-12-04 15:38:35 machei

SnapSVG Safari瀏覽器/ Firefox旋轉錯誤

回答

相關問題