animationsvgsvg-animatesvg-animationelements

How to animate the rotation of a specific element on its own axis in an SVG (SVG animation tag only)?

I want to animate the two flags, rotate them a little from left to right (or right to left), but I want to do it on their own axis, I don't know how to do it, this is the result I got with the right flag:

(I don't know much but I have been investigating how to make animations with svg, I know that rotate receives the degrees, the x and y position, but I can't understand clearly.

<svg xmlns="http://www.w3.org/2000/svg" width="864" height="864" viewBox="0 0 864 864">
  <g id="Grupo_76" data-name="Grupo 76" transform="translate(-682 -189)">
<g id="right-flag" transform="translate(-283.11 -185.563) rotate(11)">

  <!-- How can I rotate it on its own axis -->

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

  <path id="Trazado_128" data-name="Trazado 128" d="M5074,508.573v427.9" transform="translate(-3544.956 -60.656)"
    fill="none" stroke="#cab9a9" stroke-width="8" />
  <g id="Grupo_53" data-name="Grupo 53" transform="translate(1522 262)">
    <rect id="Rectángulo_1" data-name="Rectángulo 1" width="319.344" height="196.249" transform="translate(0 0)"
      fill="#999" />
    <rect id="Rectángulo_2" data-name="Rectángulo 2" width="319.344" height="196.249" transform="translate(0 0)"
      fill="rgba(92,92,92,0.77)" />
  </g>
</g>
<g id="left-flag" transform="matrix(0.978, -0.208, 0.208, 0.978, -779.086, 487.436)">
  <path id="Trazado_128-2" data-name="Trazado 128" d="M5074,508.573V936.468"
    transform="translate(-3239.704 -60.658)" fill="none" stroke="#cab9a9" stroke-width="8" />
  <g id="Grupo_53-2" data-name="Grupo 53" transform="translate(1522 262)">
    <rect id="Rectángulo_1-2" data-name="Rectángulo 1" width="312.46" height="192.018" transform="translate(0 0)"
      fill="rgba(208,191,184,0.35)" />
    <rect id="Rectángulo_2-2" data-name="Rectángulo 2" width="312.46" height="192.018" transform="translate(0 0)"
      fill="rgba(53,53,53,0.77)" />
  </g>
</g>
<circle id="Elipse_1" data-name="Elipse 1" cx="432" cy="432" r="432" transform="translate(682 189)"
  fill="rgba(208,191,184,0.35)" opacity="0.83" />
  </g>
</svg>

The file was exported from adobe XD and I add the animation tag.

Solution

  • I always suggest that when you are creating svgs to use on the web you better create them in Inkscape as it is a Native svg editor and produces a clearer and cleanest code. Now the good stuff:

    <svg  xmlns:dc="http://purl.org/dc/elements/1.1/"  xmlns:cc="http://creativecommons.org/ns#"  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"  xmlns:svg="http://www.w3.org/2000/svg"  xmlns="http://www.w3.org/2000/svg"  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"  width="864"  height="864"  viewBox="0 0 864 864"  id="svg2"  version="1.1"  inkscape:version="0.91 r13725"  sodipodi:docname="aa.svg">
    <path style="opacity:0.82999998" d="M 864,432 A 432,432 0 0 1 432,864 432,432 0 0 1 0,432 432,432 0 0 1 432,0 432,432 0 0 1 864,432 Z" id="Elipse_1"/>

    <g inkscape:transform-center-x="-148.56934" inkscape:transform-center-y="42.976369">
    <path style="fill:none;stroke:#cab9a9;stroke-width:8" d="M 450.37451,356.87985 368.72733,776.91812"/>
    <path d="M 478.9346,173.03462 792.41135,233.96833 754.96528,426.61167 441.48853,365.67796 Z"/>
    <animateTransform attributeName="transform" type="rotate" from="-5 432 432" to="5 432 432" dur="0.5s" repeatCount="indefinite" />
    </g>

    <g inkscape:transform-center-y="42.976369" inkscape:transform-center-x="148.56932">
    <path style="fill:none;stroke:#cab9a9;stroke-width:8" d="m 413.62551,356.87985 81.64718,420.03827"/>
    <path d="M 385.06542,173.03462 71.588665,233.96833 109.03474,426.61167 422.51149,365.67796 Z"/>
    <animateTransform attributeName="transform" type="rotate" from="5 432 432" to="-5 432 432" dur="0.5s" repeatCount="indefinite" />
    </g>
    </svg>

    Basically you have to set each flag's group rotation center to the background circle's rotation center. In Inkscape it is an easy task and I think that Illustrator should make it easy too.

    The blue dot is the circle's rotation center

    The orange dot is the flag's rotation center

    In this case the flag's rotation center is inkscape:transform-center-x="-148.56934" inkscape:transform-center-y="42.976369", what basically means that the original flag's group rotation center is been translated -148.56934px on the x axis and 42.976369px on the y axis to make it coincide with the circle's rotation center.

    We translate the flag rotation center to the circle rotation center

    See that when you rotate the flag the rotation happens on the circle rotation center

    Then let's add the animation. As the circle's with and height coincide with the viewbox width and height, which is 864px, you just have to calculate the half, in this case it's 432px, which places it at 432px in both axis. This is the animation itself: <animateTransform attributeName="transform" type="rotate" from="-5 432 432" to="5 432 432" dur="0.5s" repeatCount="indefinite" /> EXPLANATION: You set 432 as the flag's animation rotating center in both axis on the from, stablish -5 degrees and 5 degrees with the same rotation center to the to, set a duration in seconds and to repeatCount you can stablish a number to state the number of repetitions or indefinite to loop forever. The result is that the flag will rotate in its center from -5 degrees to 5 degrees in 0.5 seconds and will do it forever. For the other flag just copy and paste the same animation but interchange the values of the rotation degrees to make the second flag rotate in the other direction. And that's it, hope you understood. If any doubt, just add a comment.