Animate scale rotate svg element

Question

Assuming I have an svg made with inkscape. In this SVG set with a viewbox, I want to animate each element inside the SVG. There is no problem for translate or opacity ... but when I need to rotate or scale a single element, it acting weird.

I try to correctly understand the concept of the viewbox but I need some help.

I understand that I have only one origin point when I have only one viewbox should I set multiple viewbox ?

<?xml version="1.0" encoding="UTF-8"?>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
 
  // rotate or scale acting weird
  <ellipse id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
  // rotate or scale acting weird
  <rect id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
  // rotate or scale acting weird
  <path id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
 
</svg>

I'm using anime.js 3.0 or CSS or I can try anything else

Rotation and scale often need to be translated prior to performing the transformation then translated back so that the object being transformed is at the origin when it changes — mike510a, Mar 31 '19 at 00:38
Specifically the object should have its center point set to the origin... there are many ways to do this but without providing the animation code, its impossible to tell you how you should go about it.. — mike510a, Mar 31 '19 at 00:43
@Cedric Gourville If you want a detailed explanation about svg transformations and tricks, you can check out this link https://css-tricks.com/transforms-on-svg-elements/ — Syam, Jul 27 '19 at 15:51

Alexandr_TT · Accepted Answer · 2019-08-02T18:40:30.317

In Svg, the coordinates of any figure always have an absolute value that is calculated from the upper left corner of the SVG canvas.
Therefore, when applying the scale (2) command, the coordinates of the center of the figure will also be doubled and the figure will shift to the right and down.

<svg id="SVGRoot" version="1.1"  width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style="border:1px solid grey;">
     <rect  id="rect9240" transform="scale(2)" x="100" y="100" width="100" height="100"   style="fill-rule:evenodd;fill:#f00;> stroke:#000; paint-order:normal">
 
 <animateTransform
     xlink:href="#rect9240"
  attributeName="transform"
  type="scale"
  values="1;2;2;1;1"
  dur="8s"
  fill="freeze"
  repeatcount="indefinite"
  />
 </rect>  
      <circle cx="150" cy="150" r="3" fill="black" />
  <circle cx="300" cy="300" r="3" fill="dodgerblue" />
  <text x="150" y="140" font-size="16px" text-anchor="middle" > Center (150,150) </text>
   <text x="300" y="290" font-size="16px" text-anchor="middle" > Center (300,300) </text>
</svg>

To return the enlarged figure to its original position, you must use the command translate (X, Y)

There is a great post here by @Paul LeBeau where this is explained in detail.

CSS solution

In order not to calculate the position of the center of the figure, you can use the CSS rule transform-box: fill-box

When the value of the fill-box attribute is selected

The object bounding box is used as the reference box.

Below is an example of increasing and decreasing the size of figures:

svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
    animation: scale 3s linear infinite alternate;
 animation-direction: alternate;
transform-origin:50% 50%;
}


@keyframes scale {
    0% { transform: scale(0.5); }
    100% {  transform: scale(1); }
}

<svg id="SVGRoot"  version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
   <ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
  
  <rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
  
  <path  class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
 </svg>

Rotation example

svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
    animation: spin 4s linear infinite alternate;
transform-origin:50% 50%;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {  transform: rotate(359deg); }
}




  <path  class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
 
</svg>

<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">

  <ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>

  <rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>

  <path  class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
 
</svg>

Increase and rotation

svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
    animation: scale1 4s linear, spin 4s linear 4s infinite alternate;
 transform-origin:50% 50%;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes scale1 {
    0% { transform: scale(0.5);}
    100% {  transform: scale(1);}
}

<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
   
  <ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
  
  <rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
 
  <path  class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
 
</svg>

user11845418 · Answer 2 · 2019-07-27T13:39:04.913

0

I guess you mean the transform-origin CSS propierty. It is related to the center point of the svg file. Then, you need to calculate the center point of the element to animate related to document's center point.
For the animations you can use CSS animations.

edited Jul 27 '19 at 13:39

answered Jul 27 '19 at 13:21

user11845418

1
1

score 0 · Answer 3 · edited Jul 27 '19 at 15:58

0

The basics of viewBox is that the 4 numbers are "x y width height”. Generally the x/y coordinates are 0 which keeps your origin in the top left corner. Something people often do is place the origin in the middle.

In order to do that you move your viewBox top left by half of the width and half the height. In your case "-350 -250 700 500".

edited Jul 27 '19 at 15:58

Obsidian

3,719
8
17
30

answered Jul 27 '19 at 15:10

Mig

662
4
13

Animate scale rotate svg element

3 Answers3

CSS solution