The SVG <text> element specifies a graphics element consisting of a text. It is possible to apply a pattern, clipping path, mask, gradient, or filter to <text>, like other SVG graphics elements. The text not included within a <text> element will not be rendered. Whereas the text included within a <text> element can be rendered auto-wrapped, pre-formatted, or on a path.<\/p>\n\n\n\n
SVG text supports such typographic features as text decorations, choice of typeface, and use of discretionary, stylistic, or historical ligatures.<\/p>\n\n\n\n
SVG also supports international text processing needs:<\/p>\n\n\n\n
It is possible to have multi-language SVG content by substituting various text strings based on the preferred language of the user.<\/p>\n\n\n\n
To style text, you can use text-specific CSS properties such as\u00a0font-family,\u00a0font-size,\u00a0kerning,\u00a0letter-spacing,\u00a0word-spacing,\u00a0text-decoration,\u00a0stroke,\u00a0stroke-width, and\u00a0fill.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <svg width=\"250\" height=\"60\" >\n <text x=\"20\" y=\"25\" fill=\"purple\">This is a SVG text example.<\/text>\n Sorry, your browser doesn't support inline SVG.\n <\/svg>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nExample of the SVG <text> element with the rotate attribute:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <svg width=\"250\" height=\"150\" style=\"border:1px solid red\">\n <text x=\"20\" y=\"25\" fill=\"purple\" transform=\"rotate(40 30,60)\">This is a SVG text example.<\/text>\n Sorry, your browser doesn't support inline SVG.\n <\/svg>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nIn the following example, the <text> element is used with the <tspan> element, which can contain different formatting and position.<\/p>\n\n\n\n
Example of the SVG <text> element used with the <tspan> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <svg width=\"450\" height=\"150\" style=\"border:1px solid #cccccc\">\n <text x=\"20\" y=\"20\" style=\"fill:green\">\n Example of the SVG \"text\" element used with the \"tspan\" element\n <tspan x=\"25\" y=\"65\">This is a SVG text.<\/tspan>\n <tspan x=\"35\" y=\"90\">This is a SVG text.<\/tspan>\n <tspan x=\"45\" y=\"115\">This is a SVG text.<\/tspan>\n <\/text>\n Sorry, your browser doesn't support inline SVG.\n <\/svg>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nExample of the SVG <text> element used with the <a> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <svg width=\"250\" height=\"60\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" style=\"border:1px solid #cccccc\">\n <a xlink:href=\"https:\/\/www.w3docs.com\/learn-html\/svg-intro.html\" target=\"_blank\">\n <text x=\"20\" y=\"40\" fill=\"blue\" font-size=\"2em\">SVG Intro<\/text>\n <\/a>\n Sorry, your browser doesn't support inline SVG.\n <\/svg>\n <\/body>\n <\/html<\/code><\/pre>\n\n\n\nAttributes<\/h2>\n\n\n\nAttribute<\/th> Description<\/th><\/tr><\/thead> x<\/td> Specifies the starting x coordinate of the text baseline.<\/td><\/tr> y<\/td> Specifies the starting y coordinate of the text baseline.<\/td><\/tr> dx<\/td> Specifies a text position\u2019s horizontal shift from a previous text position.<\/td><\/tr> dy<\/td> Specifies a text position\u2019s vertical shift from a previous text position.<\/td><\/tr> rotate<\/td> Specifies the rotation of orientation for each individual glyph.<\/td><\/tr> lenghtAdjust<\/td> Specifies how the text is compressed or stretched for fitting the width defined by the textLenght attribute.<\/td><\/tr> textLenght<\/td> Specifies the width that the text must fit.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nThe SVG <text> element also supports the\u00a0Global Attributes\u00a0and\u00a0Event Attributes.<\/p>\n","protected":false},"excerpt":{"rendered":"
Description of the <text> element The SVG <text> element specifies a graphics element consisting of a text. It is possible to apply a pattern, clipping path, mask, gradient, or filter to <text>, like other SVG graphics elements. The text not included within a <text> element will not be rendered. Whereas the text included within a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[574],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9307"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9307"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9307\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}