osbo.com | SVG | Attributes | rotate

The rotate SVG attribute specifies the rotation of an object as it travels along a motion path.

auto | auto-reverse | <number>

0

<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"> <mpath href="#myid"/> </animateMotion> </path> </svg> </svg>

<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>

<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>

keyPoints

origin

path

World Wide Web Consortium (W3C)

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.

[ <number>+ ]#

(none)

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <text rotate="15 30 45 60" y="11">text</text> </svg>

dx

dy

lengthAdjust

textLength

x

y

World Wide Web Consortium (W3C)

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.

[ <number>+ ]#

(none)

<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>

dx

dy

lengthAdjust

textLength

x

y

World Wide Web Consortium (W3C)