{{SVGRefElem}}
The SVG text
element defines a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>
, just like any other SVG graphics element.
If text is included within SVG not inside of a <text>
element, it is not rendered. This is different from being hidden by default, as setting the display property will not show the text.
Usage context
{{svginfo}}
Example
<svg xmlns="https://www.w3.org/2000/svg" width="100" height="30" viewBox="0 0 1000 300"> <text x="250" y="150" font-family="Verdana" font-size="55"> Hello, out there </text> <!-- Show outline of canvas with a 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /> </svg>
SVG text can be rotated, like so:
<svg xmlns="https://www.w3.org/2000/svg" width="100" height="50"> <text x="10" y="20" transform="rotate(30 20,40)"> SVG Text Rotation example </text> </svg>
SVG text can be styled like HTML text:
<svg xmlns="https://www.w3.org/2000/svg" width="100" height="50"> <text x="10" y="20" style="font-family: Times New Roman; font-size: 24; stroke: #00ff00; fill: #0000ff;"> SVG text styling </text> </svg>
Attributes
Global attributes
- Conditional processing attributes »
- Core attributes »
- Graphical event attributes »
- Presentation attributes »
- {{SVGAttr("class")}}
- {{SVGAttr("style")}}
- {{SVGAttr("externalResourcesRequired")}}
- {{SVGAttr("transform")}}
Specific attributes
- {{SVGAttr("x")}}
- {{SVGAttr("y")}}
- {{SVGAttr("dx")}}
- {{SVGAttr("dy")}}
- {{SVGAttr("text-anchor")}}
- {{SVGAttr("rotate")}}
- {{SVGAttr("textLength")}}
- {{SVGAttr("lengthAdjust")}}
DOM Interface
This element implements the SVGTextElement
interface.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('SVG2', 'text.html#TextElement', '<text>')}} | {{Spec2('SVG2')}} | |
{{SpecName('SVG1.1', 'text.html#TextElement', '<text>')}} | {{Spec2('SVG1.1')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatChrome('1.0')}} | {{CompatGeckoDesktop('1.8')}} | {{CompatIE('9.0')}} | {{CompatOpera('8.0')}} | {{CompatSafari('3.0.4')}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatAndroid('3.0')}} | {{CompatGeckoMobile('1.8')}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatSafari('3.0.4')}} |
The chart is based on these sources.
Related
- {{SVGElement("tspan")}}
- {{SVGElement("tref")}}
- {{SVGElement("altGlyph")}}
{{SVGRef}}