{{ 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
{{svginfo}}
Example
<svg 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.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('SVG2', 'text.html#TextPathElement', '<textPath>')}} | {{Spec2('SVG2')}} | |
{{SpecName('SVG1.1', 'text.html#TextPathElement', '<textPath>')}} | {{Spec2('SVG1.1')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
{{SVGRef}}