rotate
rotate
attribute specifies how the animated element rotates as it travels along a path specified in an
<animateMotion>
元素。
You can use this attribute with the following SVG elements:
|
值
|
auto
|
auto-reverse
|
<number>
|
|
默认值
|
0
|
|
Animatable
|
No
|
auto
and
auto-reverse
values allow the animated element's rotation to change dynamically as it travels along the path. If the value of
rotate
is
auto
, the element turns to align its right-hand side in the current direction of motion. If the value is
auto-reverse
, it turns its left-hand side in the current direction of motion.
设置
rotate
's value to a number specifies a constant rotation, in degrees, that does not change with the animation. The default value of
0
keeps the animated element in its original orientation.
<svg width="400" height="120" viewBox="0 0 480 120"
xmlns
=
"
http://www.w3.org/2000/svg
"
>
<!-- Draw the outline of the motion path in grey -->
<
path
d
=
"
M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110
"
stroke
=
"
lightgrey
"
stroke-width
=
"
2
"
fill
=
"
none
"
id
=
"
theMotionPath
"
/>
<!-- Red arrow which will not rotate -->
<
path
fill
=
"
red
"
d
=
"
M-5,-5 L10,0 -5,5 0,0 Z
"
>
<!-- Define the motion path animation -->
<
animateMotion
dur
=
"
6s
"
repeatCount
=
"
indefinite
"
rotate
=
"
0
"
>
<
mpath
href
=
"
#theMotionPath
"
/>
</
animateMotion
>
</
path
>
<
g
transform
=
"
translate(100, 0)
"
>
<
使用
href
=
"
#theMotionPath
"
/>
<!-- Green arrow which will rotate along the motion path -->
<
path
fill
=
"
green
"
d
=
"
M-5,-5 L10,0 -5,5 0,0 Z
"
>
<!-- Define the motion path animation -->
<
animateMotion
dur
=
"
6s
"
repeatCount
=
"
indefinite
"
rotate
=
"
auto
"
>
<
mpath
href
=
"
#theMotionPath
"
/>
</
animateMotion
>
</
path
>
</
g
>
<
g
transform
=
"
translate(200, 0)
"
>
<
使用
href
=
"
#theMotionPath
"
/>
<!-- Blue arrow which will rotate backwards along the motion path -->
<
path
fill
=
"
blue
"
d
=
"
M-5,-5 L10,0 -5,5 0,0 Z
"
>
<!-- Define the motion path animation -->
<
animateMotion
dur
=
"
6s
"
repeatCount
=
"
indefinite
"
rotate
=
"
auto-reverse
"
>
<
mpath
href
=
"
#theMotionPath
"
/>
</
animateMotion
>
</
path
>
</
g
>
<
g
transform
=
"
translate(300, 0)
"
>
<
使用
href
=
"
#theMotionPath
"
/>
<!-- Purple arrow which will have a static rotation of 210 degrees -->
<
path
fill
=
"
purple
"
d
=
"
M-5,-5 L10,0 -5,5 0,0 Z
"
>
<!-- Define the motion path animation -->
<
animateMotion
dur
=
"
6s
"
repeatCount
=
"
indefinite
"
rotate
=
"
210
"
>
<
mpath
href
=
"
#theMotionPath
"
/>
</
animateMotion
>
</
path
>
</
g
>
</
svg
>
Found a problem with this page?
最后修改：
,
由 MDN 贡献者
