Background color of text in SVG

Question

I want to color the background of svg text similar to background-color in css  I was only able to find documentation on fill  which colors the text itself  Is it even possible

User · Answer

this is my favorite hack  not sure it should work   It refer an element that is not yet displayed  and it works pretty well   x000D   x000D   lt svg version  1 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  viewBox  0 0 620 40  preserveAspectRatio  xMidYMid meet  gt  x000D       lt defs gt  x000D           lt filter x  -0 02  y  0  width  1 04  height  1 1  id  removebackground  gt  x000D               lt feFlood flood-color   00ffff   gt  x000D           lt  filter gt  x000D       lt  defs gt  x000D   x000D       lt  --Draw the text-- gt   x000D       lt use xlink href   mygroup  filter  url  removebackground     gt  x000D       lt g id  mygroup  gt  x000D           lt text id  text1  x  9  y  20  style  text-anchor start font-size 14px   gt custom text with background lt  text gt    x000D           lt line x1  200  y1  18  x2  200  y2  36  stroke   000  stroke-width  5   gt   x000D           lt line x1  120  y1  27  x2  203  y2  27  stroke   000  stroke-width  5   gt   x000D       lt  g gt  x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

Instead of using a  lt text gt  tag  the   lt foreignObject gt  tag can be used  which allows for XHTML content with CSS

User · Answer

You could use a filter to generate the background   x000D   x000D   lt svg width  100   height  100   gt     lt defs gt       lt filter x  0  y  0  width  1  height  1  id  solid  gt         lt feFlood flood-color  yellow  result  bg    gt         lt feMerge gt           lt feMergeNode in  bg   gt           lt feMergeNode in  SourceGraphic   gt         lt  feMerge gt       lt  filter gt     lt  defs gt     lt text filter  url  solid   x  20  y  50  font-size  50  gt solid background lt  text gt   lt  svg gt  x000D   x000D   x000D

User · Answer

No  you can not add background color to SVG elements  You can do it programmatically with d3   var text   d3 select  text    var bbox   text node   getBBox    var padding   2  var rect   self svg insert  rect    text        attr  x   bbox x - padding       attr  y   bbox y - padding       attr  width   bbox width    padding 2        attr  height   bbox height    padding 2        style  fill    red

User · Answer

You can add style to your text      style  -webkit-tap-highlight-color  rgba 0  0  0  0        text-shadow  rgb 255  255  255  -2px -2px 0px  rgb 255  255  255  -2px 2px 0px        rgb 255  255  255  2px -2px 0px  rgb 255  255  255  2px 2px 0px     White  in this example  Does not work in IE

User · Answer

The solution I have used is   x000D   x000D   lt svg gt     lt line x1  100  y1  100  x2  500  y2  100  style  stroke black  stroke-width  2   gt         lt text x  150  y  105  style  stroke white  stroke-width 0 6em  gt Hello World  lt  text gt     lt text x  150  y  105  style  fill black  gt Hello World  lt  text gt     lt  svg gt  x000D   x000D   x000D   A duplicate text item is being placed  with stroke and stroke-width attributes  The stroke should match the background colour  and the stroke-width should be just big enough to create a  quot splodge quot  on which to write the actual text  A bit of a hack and there are potential issues  but works for me

User · Answer

For those wondering how to apply padding to a text element when it has a background like in the Robert s answer  do the following      lt svg gt       lt defs gt         lt filter x  -0 1  y  -0 1  width  1 2  height  1 2  id  solid  gt           lt feFlood flood-color   171717   gt           lt feComposite in  SourceGraphic  operator  xor    gt         lt  filter gt       lt  defs gt       lt text filter  url  solid   x  20  y  50  font-size  50  gt Hello lt  text gt     lt  svg gt    In the example above  filter s x and y positions can be used as transform  translate -10   -10   would  and width and height values can be read as 120  and 120   So we made background 20  bigger  and offsetted it -10   so background is now 10  bigger on each side of the text

User · Answer

The previous answers relied on doubling up text and lacked sufficient whitespace   By using atop and  amp nbsp  I was able to get the results I wanted   This example also includes arrows  a common use case for SVG text labels     lt svg viewBox  -105 -40 210 234  gt   lt title gt Size Guide lt  title gt   lt defs gt       lt filter x  0  y  0  width  1  height  1  id  solid  gt           lt feFlood flood-color  white  gt  lt  feFlood gt           lt feComposite in  SourceGraphic  operator  atop  gt  lt  feComposite gt       lt  filter gt       lt marker id  arrow  viewBox  0 0 10 10  refX  5  refY  5  markerWidth  6  markerHeight  6  orient  auto-start-reverse  gt           lt path d  M 0 0 L 10 5 L 0 10 z  gt  lt  path gt       lt  marker gt   lt  defs gt   lt g id  garment  gt       lt path id  right-body  fill  none  stroke  black  stroke-width  1  stroke-linejoin  round  d  M0 0 l30 0 l0 154 l-30 0  gt  lt  path gt       lt path id  right-sleeve  d  M30 0 l35 0 l0 120 l-35 0  fill  none  stroke-linejoin  round  stroke  black  stroke-width  1  gt  lt  path gt       lt use id  left-body  href   right-body  transform  scale -1 1   gt  lt  use gt       lt use id  left-sleeve  href   right-sleeve  transform  scale -1 1   gt  lt  use gt       lt path id  collar-right-top  fill  none  stroke  black  stroke-width  1  stroke-linejoin  round  d  M0 -6 5 l11 75 0 l6 5 6 5  gt  lt  path gt       lt use id  collar-left-top  href   collar-right-top  transform  scale -1 1   gt  lt  use gt       lt path id  collar-left  fill  white  stroke  black  stroke-width  1  stroke-linejoin  round  d  M-11 75 -6 5 l-6 5 6 5 l30 77 l6 5 -6 5 Z  gt  lt  path gt       lt path id  front-right  fill  white  stroke  black  stroke-width  1  d  M18 25 0 L30 0 l0 154 l-41 75 0 l0 -77 Z  gt  lt  path gt       lt line x1  0  y1  0  x2  0  y2  154  stroke  black  stroke-width  1  stroke-dasharray  1 3  gt  lt  line gt       lt use id  collar-right  href   collar-left  transform  scale -1 1   gt  lt  use gt   lt  g gt   lt g id  dimension-labels  gt       lt g id  dimension-sleeve-length  gt           lt line marker-start  url  arrow   marker-end  url  arrow   x1  85  y1  0  x2  85  y2  120  stroke  black  stroke-width  1  gt  lt  line gt           lt text font-size  10  filter  url  solid   fill  black  x  85  y  60  class  dimension  text-anchor  middle  dominant-baseline  middle  gt  120 cm lt  text gt       lt  g gt       lt g id  dimension-length  gt           lt line marker-start  url  arrow   marker-end  url  arrow   x1  -85  y1  0  x2  -85  y2  154  stroke  black  stroke-width  1  gt  lt  line gt           lt text font-size  10  filter  url  solid   fill  black  x  -85  y  77  text-anchor  middle  dominant-baseline  middle  class  dimension  gt  154 cm lt  text gt       lt  g gt       lt g id  dimension-sleeve-to-sleeve  gt           lt line marker-start  url  arrow   marker-end  url  arrow   x1  -65  y1  -20  x2  65  y2  -20  stroke  black  stroke-width  1  gt  lt  line gt           lt text font-size  10  filter  url  solid   fill  black  x  0  y  -20  text-anchor  middle  dominant-baseline  middle  class  dimension  gt  amp nbsp 130 cm amp nbsp  lt  text gt       lt  g gt       lt g title  Back Width  id  dimension-back-width  gt           lt line marker-start  url  arrow   marker-end  url  arrow   x1  -30  y1  174  x2  30  y2  174  stroke  black  stroke-width  1  gt  lt  line gt           lt text font-size  10  filter  url  solid   fill  black  x  0  y  174  text-anchor  middle  dominant-baseline  middle  class  dimension  gt  amp nbsp 60 cm amp nbsp  lt  text gt       lt  g gt   lt  g gt   lt  svg gt

User · Answer

No this is not possible  SVG elements do not have background-    presentation attributes    To simulate this effect you could draw a rectangle behind the text attribute with fill  green  or something similar  filters   Using JavaScript you could do the following    var ctx   document getElementById  the-svg    textElm   ctx getElementById  the-text    SVGRect   textElm getBBox     var rect   document createElementNS  http   www w3 org 2000 svg    rect        rect setAttribute  x   SVGRect x       rect setAttribute  y   SVGRect y       rect setAttribute  width   SVGRect width       rect setAttribute  height   SVGRect height       rect setAttribute  fill    yellow        ctx insertBefore rect  textElm

User · Answer

You can combine filter with the text    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt head gt  x000D       lt meta charset utf-8   gt  x000D       lt title gt SVG colored patterns via mask lt  title gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt svg viewBox  0 0 300 300  xmlns  http   www w3 org 2000 svg  gt  x000D         lt defs gt  x000D           lt filter x  0  y  0  width  1  height  1  id  bg-text  gt  x000D             lt feFlood flood-color  white   gt  x000D             lt feComposite in  SourceGraphic  operator  xor    gt  x000D           lt  filter gt  x000D         lt  defs gt  x000D      lt  -- something has already existed -- gt  x000D       lt rect fill  red  x  150  y  20  width  100  height  50    gt  x000D       lt circle cx  50   cy  50  r  50  fill  blue   gt  x000D         x000D         lt  -- Text render here -- gt  x000D         lt text filter  url  bg-text   fill  black  x  20  y  50  font-size  30  gt text with color lt  text gt  x000D         lt text fill  black  x  20  y  50  font-size  30  gt text with color lt  text gt  x000D       lt  svg gt  x000D     lt  body gt  x000D   lt  html gt   x000D   x000D   x000D

User · Answer

Answer by Robert Longson   RobertLongson  with modifications     lt svg width  100   height  100   gt     lt defs gt       lt filter x  0  y  0  width  1  height  1  id  solid  gt         lt feFlood flood-color  yellow   gt         lt feComposite in  SourceGraphic  operator  xor   gt       lt  filter gt     lt  defs gt     lt text filter  url  solid   x  20  y  50  font-size  50  gt  solid background  lt  text gt     lt text x  20  y  50  font-size  50  gt solid background lt  text gt   lt  svg gt    and we have no bluring and no heavy  getBBox      Padding is provided by white spaces in text-element with filter  It s worked for me

[css] Background color of text in SVG

Examples related to css

Examples related to svg

Examples related to background-color