Повернуть SVG-элемент, как изображение

#javascript #css #html5 #svg #css_animation

Я пытался сделать так, чтобы круг находился на одном месте и вращался вокруг себя,
но он вращается по странице. Я только начинаю изучать SVG и застрял на этом моменте.   



document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.kolo svg #pomidor').classList.add('pomidor');
})
#pomidor {
  transform-origin: 50% 50%;
  opacity: 1;
  transition: all 4s;
}

#pomidor.pomidor {
  opacity: 1;
  transform: rotate(-360deg);
}

  





    

Ответы

Ответ 1

Установите для CSS-свойства transform-box значение fill-box, чтобы фигура вращалась
вокруг своего собственного центра, а не вокруг левого верхнего угла viewBox.  



document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.kolo svg #pomidor').classList.add('pomidor');
})
#pomidor {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  opacity: 1;
  transition: all 4s;
}

#pomidor.pomidor {
  opacity: 1;
  transform: rotate(-360deg);
}

  






Источник ответа: @RobertLongson


Ответ 2

Вам нужно настроить transform-origin, чтобы установить точку трансформации в середине
этого круга (я использовал плагин линейки в своем браузере, чтобы легко найти его,
никакой магии):  



document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.kolo svg #pomidor').classList.add('pomidor');
})
#pomidor {
  transform-origin:  204px 41px;
  opacity: 1;
  transition: all 4s;
}

#pomidor.pomidor {
  opacity: 1;
  transform: rotate(-360deg);
}

  




  

Пример вращения колеса с одновременным перемещением  



document.querySelector("button").addEventListener("click", () => {
  document.querySelector(".kolo svg #pomidor").classList.add("pomidor");
  document.querySelector(".kolo #test").classList.add("pomidor");
});
#pomidor {
  transform-origin: 204px 41px;
  opacity: 1;
  transition: all 4s;
}
#test {
  transition: 4s;
}
#test.pomidor {
  transform: translatex(-65%);
}
#pomidor.pomidor {
  opacity: 1;
  transform: rotate(-360deg);
}

  






Источник ответа: @G-Cyr