Background Color Of Text In SVG


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

You could use a filter to generate the background.

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


The solution I have used is:

<svg>   <line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/>       <text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>   <text x="150" y="105" style="fill:black">Hello World!</text>   </svg>

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!


Comments

Popular posts from this blog

Chemistry - Bond Angles In NH3 And NCl3

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Change The Font Size Of Visual Studio Solution Explorer