SVG text inside rect

Question

I want to display some text inside SVG rect  Is it possible   I tried    lt svg xmlns  http   www w3 org 2000 svg  gt     lt g gt       lt rect x  0  y  0  width  100  height  100  fill  red  gt         lt text x  0  y  10  font-family  Verdana  font-size  55  fill  blue  gt  Hello  lt  text gt       lt  rect gt     lt  g gt   lt  svg gt    But it does not work

User · Accepted Answer

This is not possible   If you want to display text inside a rect element you should put them both in a group with the text element coming after the rect element   so it appears on top      x000D   x000D   lt svg xmlns  http   www w3 org 2000 svg  gt  x000D     lt g gt  x000D       lt rect x  0  y  0  width  100  height  100  fill  red  gt  lt  rect gt  x000D       lt text x  0  y  50  font-family  Verdana  font-size  35  fill  blue  gt Hello lt  text gt  x000D     lt  g gt  x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

Programmatically display text over rect using basic Javascript   x000D   x000D   var svg   document getElementsByTagNameNS  http   www w3 org 2000 svg    svg   0   x000D   x000D          var text   document createElementNS  http   www w3 org 2000 svg    text    x000D          text setAttribute  x   20   x000D          text setAttribute  y   50   x000D          text setAttribute  width   500   x000D          text style fill    red   x000D          text style fontFamily    Verdana   x000D          text style fontSize    35   x000D          text innerHTML    Some text line   x000D   x000D          svg appendChild text   x000D   x000D          var text2   document createElementNS  http   www w3 org 2000 svg    text    x000D          text2 setAttribute  x   20   x000D          text2 setAttribute  y   100   x000D          text2 setAttribute  width   500   x000D          text2 style fill    green   x000D          text2 style fontFamily    Calibri   x000D          text2 style fontSize    35   x000D          text2 style fontStyle    italic   x000D          text2 innerHTML    Some italic line   x000D   x000D          x000D          svg appendChild text2   x000D   x000D          var text3   document createElementNS  http   www w3 org 2000 svg    text    x000D          text3 setAttribute  x   20   x000D          text3 setAttribute  y   150   x000D          text3 setAttribute  width   500   x000D          text3 style fill    green   x000D          text3 style fontFamily    Calibri   x000D          text3 style fontSize    35   x000D          text3 style fontWeight   700  x000D          text3 innerHTML    Some bold line   x000D   x000D          x000D          svg appendChild text3   x000D       lt svg width  510  height  250  xmlns  http   www w3 org 2000 svg  gt  x000D           lt rect x  0  y  0  width  510  height  250  fill  aquamarine    gt  x000D       lt  svg gt  x000D   x000D   x000D

User · Answer

Programmatically using D3   body   d3 select  body   svg   body append  svg   attr  height   600  attr  width   200  rect   svg append  rect   transition   duration 500  attr  width   150                   attr  height   100                   attr  x   40                   attr  y   100                   style  fill    white                    attr  stroke    black   text   svg append  text   text  This is some information about whatever                    attr  x   50                   attr  y   150                   attr  fill    black

User · Answer

You can use foreignobject for more control and placing rich HTML content over rect or circle   x000D   x000D       lt svg width  250  height  250  xmlns  http   www w3 org 2000 svg  gt  x000D           lt rect x  0  y  0  width  250  height  250  fill  aquamarine    gt  x000D           lt foreignobject x  0  y  0  width  250  height  250  gt  x000D               lt body xmlns  http   www w3 org 1999 xhtml  gt  x000D                   lt div gt Here is a long text that runs more than one line and works as a paragraph lt  div gt  x000D                   lt br   gt  x000D                   lt div gt This is  lt u gt UNDER LINE lt  u gt  one lt  div gt  x000D                   lt br   gt  x000D                   lt div gt This is  lt b gt BOLD lt  b gt  one lt  div gt  x000D                   lt br   gt  x000D                   lt div gt This is  lt i gt Italic lt  i gt  one lt  div gt  x000D               lt  body gt  x000D           lt  foreignobject gt  x000D       lt  svg gt  x000D   x000D   x000D

User · Answer

lt svg xmlns  http   www w3 org 2000 svg  version  1 1  gt       lt g gt     lt defs gt       lt linearGradient id  grad1  x1  0   y1  0   x2  100   y2  0   gt         lt stop offset  0   style  stop-color rgb 145 200 103  stop-opacity 1    gt         lt stop offset  100   style  stop-color rgb 132 168 86  stop-opacity 1    gt       lt  linearGradient gt     lt  defs gt     lt rect width  220  height  30  class  GradientBorder  fill  url  grad1     gt     lt text x  60  y  20  font-family  Calibri  font-size  20  fill  white   gt My Code   Your Achivement         lt  text gt     lt  g gt   lt  svg gt

[text] SVG: text inside rect

Examples related to text

Examples related to svg

Examples related to rect