Couleur de fond du texte en SVG

Je veux colorer le fond du text svg similaire à la background-color d’ background-color dans CSS

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

Est-ce que c’est même possible?

Non, ce n’est pas possible, les éléments SVG n’ont pas d’ atsortingbuts de présentation d’ background-...background-... .

Pour simuler cet effet, vous pouvez dessiner un rectangle derrière l’atsortingbut text avec fill="green" ou quelque chose de similaire (filtres). En utilisant JavaScript, vous pouvez effectuer les opérations suivantes:

 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.setAtsortingbute("x", SVGRect.x); rect.setAtsortingbute("y", SVGRect.y); rect.setAtsortingbute("width", SVGRect.width); rect.setAtsortingbute("height", SVGRect.height); rect.setAtsortingbute("fill", "yellow"); ctx.insertBefore(rect, textElm); 

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

        solid background  

Non, vous ne pouvez pas append de couleur de fond aux éléments SVG. Vous pouvez le faire par programmation 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"); 

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

   Hello World! Hello World!  

Un élément de texte en double est placé, avec des atsortingbuts de trait et de largeur de trait. Le trait doit correspondre à la couleur d’arrière-plan et la largeur de trait doit être juste assez grande pour créer un “splodge” sur lequel écrire le texte réel.

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

Réponse de Robert Longson (@RobertLongson) avec des modifications:

         solid background  solid background  

et nous n’avons pas de flou ni de lourd “getBBox” 🙂 Le remplissage est fourni par des espaces blancs dans l’élément texte avec filtre. Ça a fonctionné pour moi

c’est mon hack préféré (pas sûr qu’il devrait fonctionner). Il renvoie un élément qui n’est pas encore affiché, et ça marche plutôt bien

          custom text with background     

Au lieu d’utiliser une , la peut être utilisée, ce qui permet un contenu XHTML avec CSS.