¿Cómo usar el índice z en elementos svg?

El índice z solo funciona en el contenido completo. Esto se debe a que el HTML renderizado controla el posicionamiento antes de pasarlo al SVG renderizado para colocar el contenido SVG interno. Entonces, básicamente no hay un índice z para SVG, usa el modelo de pintores .

Modelo de pintor: Según este modelo, la pintura se aplica en operaciones sucesivas sobre alguna zona del dispositivo de salida, cubriendo la pintura de las operaciones anteriores. Esto se debe a que, después de pintar cada objeto, se convierte en parte del fondo para la siguiente operación de pintura. En resumen, según este modelo, el orden en que se pinta o se muestra el elemento se define por el orden en que aparece el elemento en el documento. Entonces, para cambiar el índice z del elemento, se puede hacer de las siguientes maneras.

Cambie manualmente el orden del elemento en el documento SVG:

Ejemplo:

<svg xmlns="http://www.w3.org/2000/svg" 
        viewBox="10 30 220 420">
    <g>
        <g id="one">
            <circle fill="green" cx="100" 
                    cy="85" r="20" />
        </g>
  
        <g id="two">
            <circle fill="grey" cx="100" 
                    cy="115" r="20" />
        </g>
        <g id="three">
            <circle fill="green" cx="100" 
                    cy="145" r="20" />
        </g>
    </g>
</svg>

Producción:

Ahora, nuestro objetivo es aumentar el índice z del elemento «gris». Como se discutió, de acuerdo con el modelo del pintor, para que el elemento tenga el índice z más alto , debe colocarse como el último objeto que se dibujará. Entonces, para aumentar el índice z del círculo «gris», simplemente cambiaremos la posición del elemento del círculo «gris» al último.

Ejemplo:

<svg xmlns="http://www.w3.org/2000/svg" 
        viewBox="10 30 220 420">
    <g>
        <g id="one">
            <circle fill="green" cx="100" 
                    cy="85" r="20" />
        </g>
  
        <g id="three">
            <circle fill="green" cx="100" 
                    cy="145" r="20" />
        </g>
        <g id="two">
            <circle fill="grey" cx="100" 
                    cy="115" r="20" />
        </g>
    </g>
</svg>

Producción:

Uso de uso: el elemento de uso toma elementos del documento SVG y los duplica en el lugar donde lo coloca. Básicamente, en lugar de cambiar el orden del elemento en el documento, estamos duplicando el elemento para mantener la uniformidad.

Ejemplo:

<svg xmlns="http://www.w3.org/2000/svg" 
        viewBox="10 30 220 420">
    <g>
        <g id="one">
            <rect x="30" y="70" width="80" 
                height="80" fill="green"></rect>
        </g>
        <g id="two">
            <rect x="60" y="110" width="80" 
                height="80" fill="grey"></rect>
        </g>
        <g id="three">
            <rect x="90" y="150" width="80" 
                height="80" fill="black"></rect>
        </g>
    </g>
  
</svg>

Producción:

Para aumentar el índice z del elemento «verde», utilizaremos la función de uso .

<svg xmlns="http://www.w3.org/2000/svg" 
        viewBox="10 30 220 420">
    <g>
        <g id="one">
            <rect x="30" y="70" width="80" 
                height="80" fill="green"></rect>
        </g>
        <g id="two">
            <rect x="60" y="110" width="80" 
                height="80" fill="grey"></rect>
        </g>
        <g id="three">
            <rect x="90" y="150" width="80" 
                height="80" fill="black"></rect>
        </g>
    </g>
    <use xlink:href="#one" />
</svg>

Producción:

Publicación traducida automáticamente

Artículo escrito por sayaliparulekar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta