SnapSVG Safari / Firefox旋转错误

Question

我试图动画圆圈的笔画来填充随着时间的推移。我注意到Safari似乎没有应用我的变换：通过SnapSVG旋转，但通过CSS旋转工作。 IE9 +适用于正确的旋转。 Firefox做它自己的事情（向后）

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

蓝色和红色弧应相同（并顺时针旋转）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Chrome / MSIE输出，红色= SnapSVG旋转，蓝色= CSS旋转 Safari输出，红色= SnapSVG旋转，蓝色= CSS旋转 Firefox输出，红色= 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

你试过变换起源吗？

transform-origin: center center;