Настройка точки вращения и центр анимации в CSS

Question

У меня проблема с CSS-анимации:

.windmill { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    height: auto; 
 
    transform-origin: center center; 
 
    -webkit-animation:spin 4s linear infinite; 
 
    -moz-animation:spin 4s linear infinite; 
 
    animation:spin 4s linear infinite; 
 
} 
 
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

      <svg viewBox="0 0 60 55" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
 
           <g id="base""> 
 
            <polyline id="body" fill="black" points="15.039,30.666 15.383,14 16.639,14 16.98,30.666"/> 
 
           </g> 
 
            <g class="windmill"> 
 
             <polyline id="wing_x5F_top" fill="black" points="15.811,0.213 15.161,10.06 15.452,12.378 16.208,12.382 16.839,10.034 16.143,0.215"/> 
 
             <polyline id="wing_x5F_left" fill="black" points="27.41,19.574 19.182,14.129 17.023,13.232 16.646,13.886 18.372,15.598 27.244,19.861"/> 
 
             <polyline id="wing_x5F_right" fill="black" points="4.645,19.402 12.873,13.957 15.031,13.06 15.409,13.714 13.683,15.426 4.811,19.689"/> 
 
             <circle id="motor" fill="#333333" stroke="#E6E6E6" stroke-width="0.25" stroke-miterlimit="10" cx="15.976" cy="13.232" r="1.15"/> 
 
            </g> 
 
           </svg>

Пожалуйста, помогите мне, мне нужно, чтобы центр анимации, а также убедитесь, что это не двойное вращение .. Спасибо!

Answer 1

Кажется, что браузер выполняет просчет ширины и высоты. Хотя я думаю, что JavaScript как опция, у него, как правило, есть недостаток в не поддержки аппаратного ускорения. Это достаточно заметно при увеличении скорости вращения. Версия jpg, вероятно, будет довольно трудно реализовать из-за отсутствия прозрачности, позиционирования, потери отзывчивости ...

Я нашел обходное решение, добавив скрытый круг с размером лопастей ротора, к анимированной группе ,

.windmill { 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform-origin: center center; 
 
    -webkit-animation: clockwise 1s infinite linear; 
 
    -moz-animation: clockwise 1s infinite linear; 
 
    animation: clockwise 1s infinite linear; 
 
} 
 
@-moz-keyframes clockwise { 
 
    0% { 
 
     -moz-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
     -moz-transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes clockwise { 
 
    0% { 
 
     transform: rotate(0deg); 
 
    } 
 
    100% { 
 
     transform: rotate(360deg); 
 
    } 
 
}

<svg viewBox="0 0 40 55" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
 
    <polyline id="body " points="15.039,30.666 15.383,14 16.639,14 16.98,30.666 " transform="matrix(1.2953083,0,0,1.2953083,-4.694094,-0.881751)" style="fill:#000000" /> 
 
    <g class="windmill"> 
 
     <circle r="16" cy="16" cx="16" id="ellipse4307" style="fill:#000000;fill-opacity:0;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none" /> 
 
     <path style="fill:#ae0000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none" d="m 15.99036,0.001184 a 16,16.11449 0 0 0 -0.293467,0.0101 l -0.341537,12.264949 0.635004,3.923873 -0.0026,0.04048 0.0051,-0.01771 0.0026,-0.02025 0.637535,-3.923873 -0.344066,-12.26242 a 16,16.11449 0 0 0 -0.28841,-0.01518 l -0.0051,0 -0.0051,0 z m -0.0026,16.239421 -0.01771,0.0101 -3.653175,1.399035 -10.2132018,6.413292 a 16,16.11449 0 0 0 0.298528,0.523689 l 10.5522088,-5.808647 3.01817,-2.519779 0.02025,-0.01269 -0.0026,-0.0026 0.0051,-0.005 0.0076,-0.0076 -0.01518,0.0101 z m 0.0051,0.0051 0.03289,0.02025 3.01817,2.52231 10.542089,5.801057 a 16,16.11449 0 0 0 0.313706,-0.516098 l -10.218303,-6.413293 -3.650643,-1.401564 -0.02782,-0.02025 -0.0026,0.0026 0.0101,0.01269 -0.01518,-0.0101 -0.0026,0.0026 z" id="path4286" inkscape:connector-curvature="0" /> 
 
    </g> 
 
    <circle style="fill:#333333;stroke:#e6e6e6;stroke-width:1.29530823;stroke-miterlimit:10" r="1.4896045" cy="16.114491" cx="16" stroke-miterlimit="10 " id="motor " /> 
 
</svg>

Answer 2

SVG-преобразования поддерживаются по-разному в разных браузерах. IE и Opera не поддерживают их вообще. Firefox делает, но не с относительным значением (как в вашем случае).

Так что теперь у вас есть три варианта:

• Первый подход был бы изменив графики в формате .jpg, а затем Everthing должны работать нормально. Но у вас, вероятно, есть веские аргументы, не делающие этого, так что здесь есть другие решения:

• Если вы хотите придерживаться .svg, вы можете создать свою анимацию непосредственно в своем .svg-файле (тогда вам не нужно делать анимация с CSS). Это не должно быть так сложно, поскольку в Интернете есть много учебников.

• Последнее решение будет использовать JavaScript. См. this article, где вся проблема объясняется очень хорошо. Эта статья использует библиотеку GSAP со следующим кодом для решения:

  TweenMax.to("#svg, #div", 2, { 
      rotation:360, 
      transformOrigin:"50% 50%" 
  }); 
  

---

Так как вывод: делать это с чистым CSS, вероятно, невозможно. Даже если вы заработаете в своем браузере, другие, вероятно, не смогут отобразить его правильно.