{{ SVGRefElem() }}
In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a {{ SVGElement("path") }} element. To specify that a block of text is to be rendered along the shape of a {{ SVGElement("path") }}, include the given text within a textPath
element which includes an xlink:href
attribute with a reference to a {{ SVGElement("path") }} element.
Usage context
Categories | Text content element, Text content child element |
---|---|
Permitted content | Character data and any number of the following elements, in any order: Descriptive elements » {{ SVGElement("a") }}, {{ SVGElement("altGlyph") }}, {{ SVGElement("animate") }}, {{ SVGElement("animateColor") }}, {{ SVGElement("set") }}, {{ SVGElement("tref") }}, {{ SVGElement("tspan") }} |
Normative document | SVG 1.1 (2nd Edition) |
Example
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5"> <textPath xlink:href="#MyPath"> We go up, then we go down, then up again </textPath> </text> <!-- Show outline of the viewport using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" /> </svg>
Live result:
{{EmbedLiveSample("Example",500,175)}}
Attributes
Global attributes
- Conditional processing attributes »
- Core attributes »
- Graphical event attributes »
- Presentation attributes »
- Xlink attributes »
- {{ SVGAttr("class") }}
- {{ SVGAttr("style") }}
- {{ SVGAttr("externalResourcesRequired") }}
Specific attributes
- {{ SVGAttr("startOffset") }}
- {{ SVGAttr("method") }}
- {{ SVGAttr("spacing") }}
- {{ SVGAttr("xlink:href") }}
DOM Interface
This element implements the SVGTextPathElement
interface.
{{SVGRef}}