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.
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:
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:
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
Au lieu d’utiliser une