Блог

Главная - Вопросы по программированию - CSS Анимация изменяет положение элемента

CSS Анимация изменяет положение элемента

#css #svg #css-animations #svg-animate

#css #svg #css-анимация #svg-анимировать

Вопрос:

У меня есть шестиугольник внутри круга.

Смотрите начальный сценарий: https://jsfiddle.net/njzwfvpf /

Теперь я хочу добавить анимацию, вращающую шестиугольник на 360 градусов внутри круга

Это существующий сценарий с анимацией css (скрипка здесь):

 .rotate {
  -webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
          animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
@-webkit-keyframes rotating {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}  
 <svg width="350" height="350">
  <svg width="350" height="350">
    <circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <svg viewBox="0 0 600 720" width="295" height="205">
      <g transform="translate(239, 370)" class="rotate">
        <path></path>
        <path d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"></path>
      </g>
      <svg viewBox="0 0 600 720" width="507.4" height="799.5">
        <g transform="translate(105, 395)">
          <path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"></path>
        </g>
      </svg>
    </svg>
  </svg>
</svg>

Проблема в том, что при добавлении анимации шестиугольник меняет свое положение, он больше не находится внутри круга.

Что я делаю не так? Как я могу это исправить?

Ответ №1:

Проблема, с которой вы сталкиваетесь, заключается в том, что вы применяете преобразование с помощью CSS ( rotate(360deg) ), в то время как у вас уже есть преобразование для того же элемента в SVG ( translate(239, 370) ) . Вы можете решить это с помощью 2 подходов :

  1. примените все преобразования с помощью CSS, чтобы вы могли управлять анимацией с помощью CSS
  2. примените анимацию CSS к дочернему элементу (шестиугольнику)

Вот пример того, как вы можете решить эту проблему с помощью второго подхода :

 .rotate {
  -webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
          animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
@-webkit-keyframes rotating {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}  
 <svg width="350" height="350">
  <svg width="350" height="350">
    <circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <svg viewBox="0 0 600 720" width="295" height="205">
      <g transform="translate(239, 370)">
        <path></path>
        <path class="rotate" d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"></path>
      </g>
      <svg viewBox="0 0 600 720" width="507.4" height="799.5">
        <g transform="translate(105, 395)">
          <path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"></path>
        </g>
      </svg>
    </svg>
  </svg>
</svg>

Комментарии:

1. Возможно, это решение могло работать в прошлом, но когда я нажимаю фрагмент кода запуска здесь, в вашем решении, возникает та же проблема, когда полигон не вращается внутри круга. У меня такая же проблема с моей анимацией поворота svg. Также в моем случае изначально не применялись такие преобразования, и я просто применил использование CSS непосредственно к дочернему элементу, но результат не такой, как ожидалось, как в этом случае. После упорных попыток решения я даже переключился с анимации поворота на масштабирование в дизайне, но столкнулся с той же проблемой. Центральное положение элемента меняется вместе с этими анимациями. Итак, как мы можем это решить?