Color de fondo del texto en SVG

Quiero colorear el fondo del text svg similar al background-color en css

Solo pude encontrar documentación sobre el fill , que colorea el texto mismo

¿Es posible?

No, esto no es posible, los elementos SVG no tienen atributos de presentación de background-...

Para simular este efecto, podría dibujar un rectángulo detrás del atributo de texto con fill="green" o algo similar (filtros). Usando JavaScript puedes hacer lo siguiente:

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

Podría usar un filtro para generar el fondo.

        solid background  

No, no puede agregar color de fondo a los elementos SVG. Puedes hacerlo programáticamente con 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 solución que he usado es:

   Hello World! Hello World!  

Se está colocando un elemento de texto duplicado, con atributos de trazo y ancho de trazo. El trazo debe coincidir con el color de fondo, y el ancho del trazo debe ser lo suficientemente grande como para crear un “splodge” sobre el que escribir el texto real.

Un poco de hack y hay problemas potenciales, ¡pero funciona para mí!

Respuesta de Robert Longson (@RobertLongson) con modificaciones:

         solid background  solid background  

y no tenemos borrado ni pesado “getBox” 🙂 El relleno lo proporcionan los espacios en blanco en el elemento de texto con filtro. Me funcionó

este es mi truco favorito (no estoy seguro de que debería funcionar). Hace referencia a un elemento que aún no se muestra, y funciona bastante bien

          custom text with background     

En lugar de usar una etiqueta se puede usar la etiqueta , que permite contenido XHTML con CSS.

    Intereting Posts