Background color of text in SVG

css svg background-color

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?

Can you share your code so far?

These also might help stackoverflow.com/questions/6725288/svg-text-inside-rect and stackoverflow.com/questions/8675223/…

stackoverflow.com/questions/12260370/… also shows how to do this using filters.

@RobertLongson Closing this question as duplicate when it was asked 2 years prior to the other one seems wrong, especially when the only answer there is yours.

@Aperçu: The age of a question is not the main factor when choosing a duplicate target, see for example here.

sluijs

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);

That or use an svg filter (feFlood + feComposite) on the text. See slightly similar question stackoverflow.com/questions/12260370/….

This solution using getBBox(), although it works just fine, can be quite slow when a large number of calculations need to be done. The issue with using an svg filter (feFlood + feComposite) is that the text comes out a little jagged. Have offered a simple, but hacky solution below.

Better to use textElm = document.getElementById("the-text") instead of textElm = ctx.getElementById("the-text")?

How cal I use the same getBBox function in nodeJS

CasperX

You could use a filter to generate the background.

What does "SourceGraphic" mean here? Does "url(#solid)" actually cause an extra web access?

text is blurry here :(

Can yo give the background padding?

Love this solution in theory, but can confirm that the text is blurry. It seems like the filter breaks anti-aliasing.

Add operator="xor" to feComposite to prevent blurry text. @RobertLongson @teran @paulmelnikow @bill

Ali Almohsen

The solution I have used is:

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 "splodge" on which to write the actual text.

A bit of a hack and there are potential issues, but works for me!

I found this solution to be the easiest.

Confirmed this as easiest solution

Also prints nicely where as the filter solution was very blurry when printed.

Best solution!!

brilliant ! ! !

Chris G

Instead of using a <text> tag, the <foreignObject> tag can be used, which allows for XHTML content with CSS.

Can you leave an example?

Underrated answer. developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject Contains an useful example. Within your foreignObject you can use divs & spans together with css definitions.

nnattawat

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");

This does not work; it only changes the color of the text, not the background color.

Enclose the text in a div or span and apply styling to whichever of the last two you have used.

This post explains it well: cambridge-intelligence.com/…

Roman Belov

Answer by Robert Longson (@RobertLongson) with modifications:

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic" operator="xor"/>
    </filter>
  </defs>
  <text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
  <text x="20" y="50" font-size="50">solid background</text>
</svg>

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

Concerning padding, you'd better use the parameters x, y, width and height of filter. The default values provide a nice padding (I mean, not the values of your answer, but the default SVG values which are taken if you do not define them).

Using the operator "xor" makes the text appear as transparent instead of the chosen color (if we except the more complex case of a flood-color with alpha). Don't you want to use operator "over" instead?

Vu Phan

You can combine filter with the text.

SVG colored patterns via mask

Calimero100582

this is my favorite hack (not sure it should work). It refer an element that is not yet displayed, and it works pretty well

Henry's Cat

The previous answers relied on doubling up text and lacked sufficient whitespace.

By using atop and   I was able to get the results I wanted.

This example also includes arrows, a common use case for SVG text labels:

<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
        <feFlood flood-color="white"></feFlood>
        <feComposite in="SourceGraphic" operator="atop"></feComposite>
    </filter>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 0 L 10 5 L 0 10 z"></path>
    </marker>
</defs>
<g id="garment">
    <path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
    <path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
    <use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
    <use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
    <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"></path>
    <use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
    <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"></path>
    <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"></path>
    <line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
    <use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
    <g id="dimension-sleeve-length">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
    </g>
    <g id="dimension-length">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
    </g>
    <g id="dimension-sleeve-to-sleeve">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension">&nbsp;130 cm&nbsp;</text>
    </g>
    <g title="Back Width" id="dimension-back-width">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension">&nbsp;60 cm&nbsp;</text>
    </g>
</g>
</svg>

The use   instead of   causes problems on many browsers as it doesn't validate as SVG. Also, one might want to add xmlns="http://www.w3.org/2000/svg" as an attribute to the svg tag to ensure the browser interprets this properly (e.g. this doesn't work on Firefox as-is).

momciloo

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:

  <svg>
    <defs>
      <filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
        <feFlood flood-color="#171717"/>
        <feComposite in="SourceGraphic" operator="xor" />
      </filter>
    </defs>
    <text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
  </svg>

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.

FlorianT

Going further with @dbarton_uk answer, to avoid duplicating text you can use paint-order=stroke style:

Note the stroke-linejoin:round which is needed to avoid seeing spikes for the W sharp angle.

Jan Pi

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 :)

Background color of text in SVG

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US