path
The path attribute has two different meanings, either it defines a text path along which the characters of a text are rendered, or a motion path along which a referenced element is animated.
You can use this attribute with the following SVG elements:
Example
animateMotion
For <animateMotion>, path defines the motion path, expressed in the same format and interpreted the same way as the d geometric property for the <path> element. The effect of a motion path animation is a translation along the x- and y-axes of the current user coordinate system by the x and y values computed over time.
| Value | <path-data> |
|---|---|
| Default value | None |
| Animatable | No |
<path-data>-
This value defines the motion path along which the referenced element is animated. For detailed information about the commands that can be used, see the explanation for the
dattribute.
textPath
For <textPath>, path defines the path onto which the glyphs of a <text> element will be rendered. An empty string indicates that there is no path data for the element. This means that the text within the <textPath> element does not render or contribute to the bounding box of the <text> element. If the attribute is not specified, the path specified in href is used instead.
| Value | <path-data> |
|---|---|
| Default value | Path specified in href |
| Animatable | Yes |
<path-data>-
This value defines the text path along which the glyphs of the
<text>element are aligned. For detailed information about the commands that can be used, see the explanation for thedattribute.
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # TextPathElementPathAttribute |
| SVG Animations Level 2 # AnimateMotionElementPathAttribute |