动画缩放旋转 svg 元素

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

Answer 1

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>

Answer 2

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 .

Answer 3

The basics of viewBox is that the 4 numbers are " xy 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 ".