Color de fondo del texto en formato SVG

Quiero el color de fondo de svg text similar a background-color en css

Yo sólo era capaz de encontrar documentación sobre fill, que los colores, el texto en sí

Es incluso posible?

Puede compartir su código hasta el momento?
Estos también podría ayudar a stackoverflow.com/questions/6725288/svg-text-inside-rect y stackoverflow.com/questions/8675223/…
stackoverflow.com/questions/12260370/… también se muestra cómo hacer esto mediante el uso de filtros.
El cierre de esta pregunta como duplicados cuando se le preguntó a los 2 años previos a la otra parece mal, especialmente cuando la única respuesta que no es la suya.
La edad de una cuestión no es el principal factor a la hora de elegir un duplicado de destino, véase, por ejemplo, aquí.

OriginalEl autor Nick Ginanto | 2013-03-19

6 Kommentare

  1. 67

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

    Para simular este efecto se puede dibujar un rectángulo detrás de el atributo de texto con fill="green" o algo similar (filtros). Con JavaScript se puede 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);
    O eso, o el uso de un filtro svg (feFlood + feComposite) en el texto. Vea ligeramente pregunta similar, stackoverflow.com/questions/12260370/….
    Esta solución con getBBox(), aunque funciona muy bien, puede ser bastante lento, cuando un gran número de cálculos a realizar. El problema con el uso de un filtro svg (feFlood + feComposite) es que el texto se sale un poco irregulares. Han ofrecido un simple, pero hacky solución a continuación.

    OriginalEl autor Roger

  2. 14

    No, usted no puede agregar color de fondo de elementos SVG. Usted puede hacerlo mediante programación 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");
    Esto no funciona; sólo cambia el color del texto, no el color de fondo.
    Encierre el texto en div o span y aplicar un estilo a cualquiera de los dos últimos se han utilizado.

    OriginalEl autor nnattawat

  3. 9

    La solución que he utilizado es:

    <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 duplicado del elemento de texto que se coloca, con carrera y stroke-width atributos. El trazo debe coincidir con el color de fondo, y el stroke-width debe ser lo suficientemente grande como para crear un «splodge» en el que escribir el texto real.

    Un poco de un hack y hay problemas potenciales, pero a mí me funciona!

    He encontrado esta solución sea la más fácil.
    Confirmado esto como solución más fácil

    OriginalEl autor dbarton_uk

  4. 3

    Respuesta por Robert Longson (@RobertLongson) con modificaciones:

    <svg width="100%" height="100%">
      <defs>
        <filter x="0" y="0" width="1" height="1" id="solid">
          <feFlood flood-color="yellow"/>
          <feComposite in="SourceGraphic" operator="xor"/>
        </filter>
      </defs>
      <text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
      <text x="20" y="50" font-size="50">solid background</text>
    </svg>

    y no tenemos bluring y no pesados «getBBox» 🙂
    El relleno es proporcionada por los espacios en blanco en el texto del elemento de filtro.
    Ha trabajado para mí

    El relleno no me funciona.

    OriginalEl autor Roman Belov

  5. 0

    Lugar de utilizar un <text> etiqueta, la <foreignObject> etiqueta puede ser utilizado, que permite el contenido XHTML con CSS.

    OriginalEl autor Chris G

  6. 0

    Puede agregar estilo a su texto:

      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
        text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px, 
         rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"

    Blanco, en este ejemplo.
    No funciona en IE 🙂

    OriginalEl autor Jan Pi

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea