CODEWITHSUNDEEP
animationsvg
Rohit Saini
Rohit Saini

Reputation: 997

How to add custom animation in SVG?

I want to rotate a image which is already built in SVG using animation without any online website, editor & without jQuery. I wanna do it custom.

Please help.

Upvotes: 2

Views: 99

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14565

CSS animation

Raster images can be added inside SVG using the <image> tag

And use the usual CSS rules for animation 

<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.sstatic.net/34irD.png"/>

<image id="disk" class="cls-1" x="515" y="165" width="815" height="815" xlink:href=" https://i.sstatic.net/Qas6q.png"/> 

<image id="scris" class="cls-1" x="363" y="740" width="1105" height="233" xlink:href=" https://i.sstatic.net/TCbha.png"/>
</svg>

SVG animation

That there was no beating of a disk at animation of rotation it is necessary to precisely calculate the center of rotation

For calculation, the JS method getBBox () is used

<script>
let BB = gr1.getBBox();

 console.log(BB.x + BB.width / 2);
 console.log(BB.y + BB.height / 2);
</script>

The obtained coordinates of the center of rotation: x="925.5" y="572.5"

Rotation Animation Formula:

<animateTransform attributeName="transform" type="rotate" dur="10s"
 values="0 922.5 572.5;360 922.5 572.5;"  />


<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">

<image x="293" y="75" width="1255" height="959" xlink:href="https://i.sstatic.net/34irD.png"/>
<g id="gr1">
<image id="disk" class="cls-1" x="515" y="165" width="815" height="815" xlink:href=" https://i.sstatic.net/Qas6q.png"/> 
  <animateTransform attributeName="transform" type="rotate" dur="10s" values="0 922.5 572.5;360 922.5 572.5;" repeatCount="indefinite"  />
</g>
<image id="scris" class="cls-1" x="363" y="740" width="1105" height="233" xlink:href=" https://i.sstatic.net/TCbha.png"/>
</svg>

Upvotes: 3

Related Questions