animateMotion
The rotate SVG attribute specifies the rotation of an object as it travels along a motion path.
Value
auto | auto-reverse | <number>
Default
auto
auto-reverse
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="-10 -10 120 120">
<path d="M50,0 A25,25,0,0,1,50,100 A25,25,0,0,1,50,0" fill="none" id="myid" stroke="black"/>
<path d="M-5,-3 L5,0 L-5,3">
<animateMotion dur="4" repeatCount="indefinite" rotate="auto-reverse">
<mpath href="#myid"/>
</animateMotion>
</path>
</svg>
</svg>
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="-10 -10 120 120">
<path d="M50,0 A25,25,0,0,1,50,100 A25,25,0,0,1,50,0" fill="none" id="myid" stroke="black"/>
<path d="M-5,-3 L5,0 L-5,3">
<animateMotion dur="4" repeatCount="indefinite" rotate="180">
<mpath href="#myid"/>
</animateMotion>
</path>
</svg>
</svg>
Internal
External
text
The rotate SVG attribute specifies the supplemental rotation, in degrees, about the current text position that will be applied to all of the glyphs corresponding to each character within this element.
Value
Default
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<text rotate="15 30 45 60" y="11">text</text>
</svg>
Internal
External
tspan
The rotate SVG attribute specifies the supplemental rotation, in degrees, about the current text position that will be applied to all of the glyphs corresponding to each character within this element.
Value
Default
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<text y="11">text
<tspan rotate="15 30 45 60 75">tspan</tspan>
text</text>
</svg>
Internal
External