Simple SVG animation and svg Animation

Simple SVG animation and svg Animation

I. First, let's look at the effect.

Ii. svg implementation

Iii. Code Description
(1) AnimateTransformAn element is the object for which we want to make an animation (that is Rect), It will execute all the effort

(2) because the center of the square overlaps with the origin of the area (the coordinate is (400,400), the square will rotate around its center 360 degrees

From = "0" to = "360" indicates the rotation angle. Dur = "5 s" indicates the rotation time.

(3) <line x1 = "-400" y1 = "0" x2 = "400" y2 = "0" style = "stroke: black;"/> X axis

<Line x1 = "0" y1 = "-400" x2 = "0" y2 = "400" style = "stroke: black;"/> Y axis