Cómo colocar elementos HTML sobre SVG en línea

3 minutos de lectura

Puedo usar z-index para colocar varios elementos HTML uno encima del otro en el orden que desee, excepto cuando uno de los elementos en un SVG en línea. Por ejemplo, dado el HTML

<div>
    <p>Text before SVG. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?</p>
    <svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="75" cy="40" r="20" fill="red" />
    </svg>
</div>
<div>
    <svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="75" cy="75" r="20" fill="red" />
    </svg>
    <p>SVG before text. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?</p>
</div>

y el CSS correspondiente

p {
    width: 200px;
    z-index:10;
}
div {
    position: relative;
}
svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

no importa cómo ordene los dos o ajuste el índice z, el SVG en línea se muestra encima del texto. ¿Cómo puedo obtener el SVG detrás del texto?

El ejemplo anterior está disponible en https://jsfiddle.net/o0n10j78/1/ .

Si es relevante, en mi aplicación real estoy generando casi toda la estructura del documento en Javascript con la ayuda de jQuery, incluido el SVG en línea y el bloque HTML que deseo tener delante.

  • Intente establecer el índice z del svg en -1

    – Hoshts

    24 de octubre de 2015 a las 1:34

  • ¡Eso funciona, gracias! Ahora… ¿por qué funciona? Si agrega su comentario a una respuesta, lo votaré y, a falta de una mejor respuesta, lo aceptaré en unos días. Sin embargo, me encantaría aceptar una respuesta que me diga por qué se comporta de esta manera para que pueda mejorar mi modelo mental de la situación. Estoy particularmente perdido por qué funciona bien para hermanos, digamos, p’s.

    – Alan De Smet

    24 de octubre de 2015 a las 1:39


  • El problema no es en realidad el svg aquí sino la etiqueta p. El índice Z no se aplica a los elementos ya que no tiene un conjunto de posiciones. Una alternativa para establecer -1 en el svg, establezca la posición: relativo en la etiqueta P. No me di cuenta de que faltaba la posición en ese.

    – Hoshts

    24 de octubre de 2015 a las 1:45


Avatar de usuario de Hoshts
Hosht

La propiedad del índice z solo se aplica en elementos posicionados. agregando position: relative; a la etiqueta de párrafo se aplicará correctamente.

Mirar esta página para una referencia completa de la propiedad.

En una nota al margen: como escribí por primera vez en un comentario, establecer el índice z de svg en -1 funciona, ya que reduce la prioridad del elemento por debajo del valor predeterminado que tienen todos los elementos. Esto tiene la desventaja de que el svg también se coloca detrás del div. Intente aplicar un color de fondo al div mientras tiene el índice z de svg establecido en -1.

Por favor agregue un z-index:-1 al svg.

svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

  • Mejor usa la respuesta aceptada.

    – Mikkel R. Lund

    25 de noviembre a las 8:36

agregando z-index: -1 como sugiere fazil abdulkhadar no funcionó para mí porque tengo antecedentes. Por lo tanto, mi svg estará detrás de mi fondo.

Como sugieren por HoshtPuse position: relative; en los elementos que quiero frente a mi svg absoluto.

Para el ejemplo de este problema, será:

p {
   position: relative; // add it
   width: 200px;
   /* z-index: 10; */ // change it to z-index: 1;
}
div {
   position: relative; // not sure it is necessary
}
svg {
   position: absolute;
   left: 0;
   top: 0;
   /* z-index: 1; */ // remove it
}

  • ¡Gracias! Las otras soluciones tampoco me funcionaron, ya que también tengo una imagen de fondo.

    – Mikhail Ratner

    21 de febrero a las 9:47

  • Eres un salvavidas. Esto fue lo único que funcionó. Usando z-index:1 en mi SVG hizo que el div cortara la parte inferior del SVG por alguna razón.

    – Badr B

    22 de junio a las 18:41

¿Ha sido útil esta solución?