SVG 动画问题 - 圆形动画偏离中心答案

【问题标题】：SVG animation problem - circle animation off centerSVG 动画问题 - 圆形动画偏离中心
【发布时间】：2019-07-21 23:13:18
【问题描述】：

请有人检查一下这个 codepen 并找出为什么 SUN 动画不合适，偏离中心？

codepen

  <svg version="1.1"
   id="sun"
   class="climacon climacon_sun"
   viewBox="15 15 70 70">
<clipPath id="sunFillClip">
  <path d="M0,0v100h100V0H0z M50.001,57.999c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C57.999,54.417,54.418,57.999,50.001,57.999z"/>
</clipPath>

【问题讨论】：

保留摘录代码总是更好。无论如何，您应该将旋转和缩放动画应用于整个 svg，而不是其中的每个元素。尝试将动画添加到太阳的 svg 元素。
添加变换框：填充框；到你的 g, path, circle, rect {
@enxaneta -- 谢谢，效果很好。你能把它作为答案吗？我会接受的。

标签： animation svg

【解决方案1】：

在大多数情况下，将transform-box: fill-box 放在您的 CSS 类中就可以了。如果您需要更广泛的浏览器支持 - 只需为特殊浏览器（如 Edge）使用单独的 CSS 类，并使用像素完美的 transform-origin 属性并在使用 JS 的类之间切换。

.modern{
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.edge{
  transform-origin: 52px 34px;
}

Your working example

Also, please refer to other popular solutions for major use cases

【讨论】：