当viewBox和物理尺寸不一致，使用css3动画时出问题？

Question

在svg标签中定义了viewBox、物理尺寸width、height，当viewBox和物理尺寸比例为1:1时，一切正常。
当两者比例不为1:1时，使用css3的scale出现如图中的情形

怎么设置才能使触发动画又不会出现位置和尺寸的偏差呢？

Answer 1

发现问题出现在viewBox和transform上。
解决方案的方案是避免使用transform，通过别的方式去替换该表现形式，比如用margin+width+height替换scale。

@keyframes rubberband {
  from { margin:0; width:100%; height:100%; }
  30% { margin:12.5% 0 0 -12.5%; width:125%; height:75%; }
  40% { margin:-12.5% 0 0 12.5%; width:75%; height: 125%; }
  50% { margin:7.5% 0 0 -7.5%; width:115%; height:85%; }
  65% { margin:-2.5% 0 0 2.5%; width:95%; height:105%; }
  75% { margin:2.5% 0 0 -2.5%; width:105%; height:95%; }
  to { margin:0; width:100%; height:100%; }
}