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

星空
  • 1.2k

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

clipboard.png

clipboard.png

clipboard.png

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

回复
阅读 1.2k
1 个回答
✓ 已被采纳

发现问题出现在viewBoxtransform上。
解决方案的方案是避免使用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%; }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏