Проблема с SVG-анимацией - круговая анимация смещена от центра

Question

Может кто-нибудь, пожалуйста, проверить эту кодовую ручку и выяснить, почему анимация СОЛНЦА неуместна, не в центре?

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>

Answer 1

В большинстве случаев, добавив transform-box: fill-box в ваш класс CSS, вы добьетесь цели.Если вам нужна более широкая поддержка браузера - просто используйте отдельный класс CSS для специальных браузеров, таких как Edge, с идеальным для пикселя свойством transform-origin и переключайтесь между классами с помощью JS.

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

Ваш рабочий пример

Также, пожалуйста, обратитесь к другим популярным решениям для основных случаев использования