CODEWITHSUNDEEP
htmlanimationsvggroupingsvg-animate
biotikc h
biotikc h

Reputation: 155

How do i animate a group of SVGs, rather than only animating one at a time?

I have a little svg drawing that I'd like to animate, it consists of several SVG elements. I'd like to be able to animate them together, as if they were the same thing.

So far I've grouped them together and put an individual animation at the end of each SVG, like this:

<g id="buildings">
  <rect fill="#aad4ff" height="22"  width="90" x="223.5" y="376.5">
    <animate attributeType="XML" attributeName="y" from="376.5" to="373" begin="mouseover" end="mouseout" dur="500ms"/>
  </rect>
  <rect fill="#aad4ff" height="117"  width="113" x="110.5" y="281.5">
    <animate attributeType="XML" at . . .
  </g>

as you can see the i have <rect ...> <animate .../> for each svg, this makes it complicated if my SVG is a drawing of a bird, consisting of a lot of different SVGs

My question is: How can I use animate when referring to a group of SVGs?

<g id="something">
  <ellipse cx="46.78408" cy="425.59942" fill="#ff5656"  rx="15" ry="16"/>
  <ellipse cx="50" cy="437" fill="#ff5656" rx="25" ry="10"/>
  <animate attributeType="XML" attributeName="cx" from="47" to="646" repeatCount="indefinite" dur="10s"/>
</g>

I want to use one animate line for all the SVG elements inside the group and this way of writing it does not seem to work.

PS - it is for a project and i am not allowed to use CSS, if this can be done within HTML that would be best.

Upvotes: 2

Views: 1682

Answers (2)

Alexandr_TT
Alexandr_TT

Reputation: 14585

If you need to move several elements of a group together across the screen, then you need to replace the animation of one element with the animation of the entire group.

Use animation command to move:

<animateTransform  xlink:href="#something" attributeName="transform" type="translate"
values="x1,y1;x2,y2" />

By combining the values of the horizontal and vertical coordinates, you can get:

  • Move a group of elements horizontally:

values="x1,y1;x2,y1"

<svg  width="800" height="800" viewBox="800 800">
<g id="something" >
  <ellipse id="el1" cx="46" cy="42" fill="#ff5656"  rx="16" ry="16"/>
  <ellipse id="el2"cx="46" cy="43" fill="#B53D3D" rx="25" ry="10"/>
 </g>
<animateTransform  xlink:href="#something" attributeName="transform" type="translate"
values="0,10;300,0;0,10"  repeatCount="indefinite" dur="5s"/> 
</svg>

  • Moving a group of elements vertically:

values="x1,y1;x1,y2"

<svg  width="800" height="800" viewBox="800 800">
<g id="something" >
  <ellipse id="el1" cx="46" cy="42" fill="#ff5656"  rx="16" ry="16"/>
  <ellipse id="el2"cx="46" cy="43" fill="#B53D3D" rx="25" ry="10"/>
 </g>
<animateTransform  xlink:href="#something" attributeName="transform" type="translate"
values="0,10;0,300;0,10"  repeatCount="indefinite" dur="5s"/> 
</svg>

  • Movement in all directions:

values="x1,y1;x2,y2;x3,y3"

<svg  width="800" height="800" viewBox="800 800">
<g id="something" >
  <ellipse id="el1" cx="46" cy="42" fill="#ff5656"  rx="16" ry="16"/>
  <ellipse id="el2"cx="46" cy="43" fill="#B53D3D" rx="25" ry="10"/>
 </g>
<animateTransform  xlink:href="#something" attributeName="transform" type="translate"
values="
   0,10;
   50,250;
   100,150;
   200,300;
   100,400;
   0,10"
   repeatCount="indefinite"
   dur="5s"/> 
</svg>

You can also move raster or vector images with this command translate

<svg  width="800" height="800" viewBox="800 800">
<image xlink:href="https://twemoji.maxcdn.com/svg/1f341.svg" width="25%" height="25%" >
 
<animateTransform  attributeName="transform" type="translate"
values="
   0,10;
   150,350;
   200,300;
   350,150;
   200,100;
   100,400;
   0,10"
   repeatCount="indefinite"
   dur="5s"/>  
  </image> 
</svg>

Upvotes: 2

ccprog
ccprog

Reputation: 21921

You can only animate the attributes of the group. You don't give details of what you want to do exactly, but let's assume you want to move your bird across the screen from left to right, while the wings of the bird move in relation to its body.

That would mean you must define the wing movement for each individual wing, but the movement across the screen can be defined as an animation of the transform attribute of the group. There is even a specialised element for that:

<g id="something">
    <animateTransform attributeType="XML" attributeName="transform" type="translate"
        from="0" to="600" repeatCount="indefinite" dur="10s"/>
    <ellipse cx="46.78408" cy="425.59942" fill="#ff5656"  rx="15" ry="16"/>
    <ellipse cx="50" cy="437" fill="#ff5656" rx="25" ry="10"/>
</g>

Thee syntax of <animateTransform> is a shortened form for "go from attribute transform="translate(0)" to transform="translate(600)". The translate() function has actually two parameters, the x and y relative movement. For example transform="translate(600 100)" would mean "go 600 to the right, and 100 down". In the animation element, only the numbers need to be listed, like this:

    <animateTransform attributeType="XML" attributeName="transform" type="translate"
        from="0 0" to="600 100" repeatCount="indefinite" dur="10s"/>

The animation interpolates over both numbers simultanuously, resulting in a diagonal movement in a straight line from origin to endpoint.

Upvotes: 4

Related Questions