Couleur de fond du texte en SVG

Question

Je veux colorer l'arrière-plan du svg. text similaire à background-color en css

Je n'ai pu trouver de la documentation que sur fill qui colore le texte lui-même

Est-ce même possible ?

Answer 1

Non, cela n'est pas possible, les éléments SVG n'ont pas de background-... attributs de présentation .

Pour simuler cet effet, vous pouvez dessiner un rectangle derrière l'attribut texte avec fill="green" ou quelque chose de similaire (filtres). En utilisant JavaScript, vous pourriez faire ce qui suit :

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

Answer 2

Vous pourriez utiliser un filtre pour générer l'arrière-plan.

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

Answer 3

La solution que j'ai utilisée est la suivante :

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

Un élément de texte dupliqué est placé, avec des attributs de trait et de largeur de trait. Le trait doit correspondre à la couleur de l'arrière-plan et la largeur du trait doit être juste assez grande pour créer une "tache" sur laquelle écrire le texte.

Un peu de bricolage et il y a des problèmes potentiels, mais ça marche pour moi !

Answer 4

Au lieu d'utiliser un <text> l'étiquette <foreignObject> peut être utilisée, ce qui permet d'utiliser du contenu XHTML avec CSS.

Answer 5

Non, vous ne pouvez pas ajouter une couleur de fond aux éléments SVG. Vous pouvez le faire de manière programmatique avec 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");