Background color of tspan element

by

A rect is probably the best way to do that (assuming you are only dealing with the simplest forms of text).

The tspans have no “background” themselves in SVG 1.1, the background is whatever gets painted before the tspan. There are many cases to consider, such as the case where a tspan is inside a textPath that has the shape of a circle. Also note that it’s not as simple as a continous rectangle in all cases, a single tspan can be skewed, rotated and partitioned into several intersecting and non-intersecting shapes due to transforms, glyph positioning, etc.

There’s another way I can think of that would do this without scripting, but then you’d need to know the width of the string in advance (e.g by using a monospaced font). If you have that then you can add another tspan element using the Ahem font, placing it before the other tspan in the document and giving it the same x,y position as the tspan you want to give a “background”.

Otherwise the way to do this is through scripting, and adding rectangles (or tspans with an Ahem-like font).

More Related Contents:

  1. How would I achieve a shadow that won’t show through transparent text?
  2. Limit text length to n lines using CSS
  3. img src SVG changing the styles with CSS
  4. Invert rounded corner in CSS?
  5. Background color of text in SVG
  6. Transparent hollow or cut out circle
  7. Inline SVG in CSS
  8. SVG animation is not working on IE11
  9. CSS transparent curved shape with two rounded sides
  10. SVG USE element and :hover style
  11. How to animate handwriting text on the web page using SVG?
  12. Wave (or shape?) with border on CSS3
  13. How to create a curve on the top of a background?
  14. Text on image mouseover?
  15. Specify an SVG as a background image and ALSO style the SVG in CSS?
  16. Outlining and partially filling an SVG Shape
  17. Can I change the fill color of an svg path with CSS?
  18. SVG in img element proportions not respected in ie9
  19. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  20. CSS: Using raw svg in the URL parameter of a background-image in IE
  21. How do I include a font awesome icon in my svg?
  22. How can I change the color of an ‘svg’ element?
  23. Inner text shadow with CSS
  24. How to add animated gradient to an svg path?
  25. Align text to the bottom of a div
  26. CSS change d property of
  27. Fill only Half a star with SVG
  28. SVG Fill not being applied in FireFox
  29. Using SVG as background image
  30. Wrap text from bottom to top

Leave a Comment