Редактировать .SVG для анимации - XML

196

04 января 2022, 00:10

Как правильно повернуть диск этого image?

Я пытался что-то сделать (попробуйте запустить код), но безуспешно. Происходит биение диска. Но это должно выглядеть так:

ссылка на GIF

Ниже код анимации диска:

<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="10s"
repeatCount="indefinite" />

Полный код на pastebin.

Answer 1

Вариант с вращением изображения в формате png

Чтобы не смешивать два разных решения и облегчить выбор одного из них, этот вариант оформлен как отдельная тема. В первом решении растровые изображения были преобразованы в формат base64

Выигрыша от данного решения нет, так как SVG в этом случае ведёт себя как обычное растровое изображение, у которого можно только менять размеры и месторасположение. Размер файла при этом решении получился очень большой -132k, поэтому его неудобно читать и редактировать.

Обдумайте вариант решения анимации растровых изображений.

Растровые изображения можно добавлять внутрь SVG используя тег <image>
И использовать для анимации обычные правила CSS

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="499.968" height="281.232" viewBox="0 0 1920 1080"> 
<defs> 
    <style> 
      .cls-1 { 
        opacity: 0.96; 
      } 
	 #disk{ 
	transform-origin: center center; 
	transform-box: fill-box; 
	animation: rotate_disk 10s linear forwards infinite; 
  } 
 
  @keyframes rotate_disk { 
  	100% { 
  		transform: rotateZ(360deg); 
  	} 
  } 
	   
    </style> 
  </defs> 
<image x="293" y="75" width="1255" height="959" xlink:href="https://i.stack.imgur.com/34irD.png"/> 
 
<image id="disk" class="cls-1" x="515" y="165" width="815" height="815" xlink:href=" https://i.stack.imgur.com/Qas6q.png"/>  
 
<image id="scris" class="cls-1" x="363" y="740" width="1105" height="233" xlink:href=" https://i.stack.imgur.com/TCbha.png"/> 
</svg>

В этом варианте решения размер файла получился 824 байта против 132 kб первого решения.

Answer 2

Перевод ответа @Alexandr_TT на вопрос EnSO: Edit .svg to animate - XML

Вариант с вращением изображения SVG в формате base64

Чтобы не происходило биение диска необходимо правильно указать центр вращения.

Сделать это поможет правило CSS: transform-box: fill-box;

Добавьте в ваше приложение:

 #disk{
    transform-origin: center center;
    transform-box: fill-box;
    animation: rotate_disk 10s linear forwards infinite;
  }
  @keyframes rotate_disk {
    100% {
        transform: rotateZ(360deg);
    }
  }

CODEPEN