警告： Although Chrome 45 deprecated SMIL in favor of CSS animations and Web animations, the Chrome developers have since suspended that deprecation.
Firefox 4 introduced support for animating SVG 使用 Synchronized Multimedia Integration Language (SMIL). SMIL allows you to:
This is done adding an SVG element like
<animate>
inside the SVG element to animate. Below are examples for the four different ways.
The following example animates the
cx
attribute of a circle. To do so, we add an
<animate>
element inside the
<circle>
element. The important attributes for
<animate>
是：
The name of the attribute to animate.
The initial value of the attribute.
The final value.
The duration of the animation (for example, write '5s' for 5 seconds).
If you want to animate more attributes inside the same element, just add more
<animate>
元素。
<svg width="300" height="100">
<title>Attribute Animation with SMIL</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animate
attributeName="cx" from="0" to="500"
dur="5s" repeatCount="indefinite" />
</circle>
</svg>
<animateTransform>
element let you animate
transform
attributes. This new element is necessary because we are not animating a simple attribute like
x
which is just a number. Rotation attributes look like this:
rotation(theta, x, y)
，其中
theta
is the angle in degrees, and
x
and
y
are absolute positions. In the example below, we animate the center of the rotation and the angle.
<svg width="300" height="100">
<title>SVG SMIL Animate with transform</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1">
<animateTransform
attributeName="transform"
begin="0s"
dur="20s"
type="rotate"
from="0 60 60"
to="360 100 60"
repeatCount="indefinite"
/>
</rect>
</svg>
<animateMotion>
element lets you animate an element position and rotation according to a path. The path is defined the same way as in
<path>
. You can set the attribute to define whether the object rotates following the tangent of the path.
In this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely. The animation here is handled by the
<animateMotion>
element. In this case, we're establishing a path consisting of a
MoveTo
command to establish the starting point for the animation, then the
Horizontal-line
command to move the circle 300 pixels to the right, followed by the
Z command
, which closes the path, establishing a loop back to the beginning. By setting the value of the
repeatCount
属性到
indefinite
, we indicate that the animation should loop forever, as long as the SVG image exists.
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
<title>SVG SMIL Animate with Path</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion
path="M 0 0 H 300 Z"
dur="3s" repeatCount="indefinite" />
</circle>
</svg>
Same example as before with a curved path and following the direction of the path.
<svg width="300" height="100">
<title>SVG SMIL Animate with Path</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1">
<animateMotion
path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
dur="3s" repeatCount="indefinite" rotate="auto" />
</rect>
</svg>
最后修改： , 由 MDN 贡献者