Question

请问有人可以检查此代码笔并弄清楚为什么SUN动画不在中心位置吗？

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

Answer 1

在大多数情况下，将transform-box: fill-box放在CSS类中即可达到目的。如果您需要更广泛的浏览器支持-只需对具有像素完美的transform-origin属性的特殊浏览器（如Edge）使用单独的CSS类，并使用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

SVG动画问题-圆动画偏离中心

1 个答案: