{{SVGRef}}
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 {{SVGAttr("href")}} attribute with a reference to a {{SVGElement("path")}} element.
Usage context
{{svginfo}}
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("href")}}
DOM Interface
This element implements the {{domxref("SVGTextPathElement")}} interface.
Example
SVG
<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>
Result
{{EmbedLiveSample("Example", 500, 175)}}
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 | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |