Elemento <g> de SVG

El elemento <g> de SVG se utiliza para agrupar formas de SVG. Después de la agrupación, puede transformar toda la forma de la misma manera que una sola forma. Esto es una ventaja en comparación con el elemento <svg> anidado, que no puede ser el objetivo de la transformación de manera individual. También puede establecer el estilo del elemento de agrupación y usarlo repetidamente como si fuera un solo elemento.

El elemento g se utiliza como contenedor para combinar objetos. Las transformaciones añadidas al elemento g se aplican a todos sus elementos hijos. Los atributos añadidos al elemento g se heredan por todos sus elementos hijos. Además, el elemento g también se puede utilizar para definir objetos complejos, que luego se pueden referenciar a través del elemento <use>.

Ejemplo de elemento <g> de SVG

Este es un simple SVG <g>Ejemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<g>
　　　　　　<linea　x1="10"　y1="10"　x2="85"　y2="10"
　　　　　　　　　　estilo="pincel:　#006600;"/>
　　　　　　<rect　x="10"　y="20"　alto="50"　ancho="75"
　　　　　　　　　　estilo="pincel:　#006600;　relleno:　#006600"/>
　　　　　　<texto　x="10"　y="90"　estilo="pincel:　#660000;　relleno:　#660000">
　　　　　　　　w30000">w/codebox.com Tutoriales básicos<
　　　　g>/text>
g>/<

Después de ejecutar, el efecto de la imagen es:

Este ejemplo muestra formas combinadas con el elemento <g>.3formas. Como se muestra aquí, no hay ventajas especiales en este grupo. Pero tenga en cuenta lo que sucede cuando solicitamos la conversión del elemento <g>. Este es el código:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<g　transform="girar(45　50　50)">
　　　　　　<linea　x1="10"　y1="10"　x2="85"　y2="10"
　　　　　　　　　　estilo="pincel:　#006600;"/>
　　　　　　<rect　x="10"　y="20"　alto="50"　ancho="75"
　　　　　　　　　　estilo="pincel:　#006600;　relleno:　#006600"/>
　　　　　　<texto　x="10"　y="90"　estilo="pincel:　#660000;　relleno:　#660000">
　　　　　　　　w30000">w/codebox.com Tutoriales básicos<
　　　　g>/text>
g>/<

Después de ejecutar, el efecto de la imagen es:

notar<g>cómo todos los formas en un elemento se rodean alrededor de un punto50", luego gire desde este punto50,45grados.

estilo de los elementos g se hereda de sus elementos hijos

<g>estilo CSS de un elemento se hereda de sus elementos hijos. Aquí hay un ejemplo:

<svg　ancho="320"　alto="150"><g estilo="trazo: #0000ff; trazo-ancho:　4px; llenar: #ff0000">
　　　　<rect　　　　x="10"　y="10"　ancho="100"　alto="50"　/>
　　　　<círculo　cx="150"　cy="35"　r="25"　/>
　　　　<círculo　cx="250"　cy="35"　r="25"
　　　　　　　　　　　estilo="pincel:　#009900;　relleno:　#00ff00;/>
g>/text>
g>/<

Este ejemplo define un<g>elemento tiene tres subelementos. El<g> elemento tiene unaestilolos dos primeros subelementos no tienenestilopropiedad. Por lo tanto, el estilo definido en el<g>que son heredados por estos subelementos. El tercer subelemento tiene unaestiloestablece las propiedades de trazo y relleno de color, pero aún hereda el<g>del elementopincel-anchopropiedades.

Después de ejecutar, el efecto de la imagen es:

Desventaja: Los elementos <g> no tienen propiedades X e Y

La capacidad de transformar todas las formas dentro del elemento <g> es una ventaja en comparación con agrupar formas dentro del elemento <svg> anidado. El elemento <svg> no puede transformarse por sí solo. Debes anidar el elemento <svg> dentro del elemento <g> para transformar sus formas anidadas.
Sin embargo, en comparación con el elemento <svg>, el elemento <g> tiene una desventaja. No puedes mover el elemento <g> que incluye todas las formas anidadas solo cambiando las propiedades x e y del elemento <g>. El elemento <g> no tiene propiedades x e y. Para mover el contenido del elemento <g>, solo puedes usar la propiedad transform utilizando la función "translate", por ejemplo: transform ="translate(x,y)".
Si necesitas usar las propiedades x e y para mover todas las formas dentro del elemento <g>,则需要将 <g> elemento anidado en el elemento <svg>. El elemento <svg> tiene propiedades x e y. Este es un ejemplo:

<svg　ancho="320"　alto="150">
　　　　<g　transform="girar(45　50　50)">
　　　　　　　　<linea　x1="10"　y1="10"　x2="85"　y2="10"
　　　　　　　　　　　　estilo="pincel:　#006600;"/>
　　　　　　　　<rect　x="10"　y="20"　alto="50"　ancho="75"
　　　　　　　　　　　　estilo="pincel:　#006600;　relleno:　#006600"/>
　　　　　　　　<texto　x="10"　y="90"　estilo="pincel:　#660000;　relleno:　#660000">
　　　　　　　　　　w30000">w/codebox.com Tutoriales básicos<
　　　　g>/text>
g>/<

En este ejemplo,<g>formas del elemento interno están anidadas en　<svg>Por favor, ten en cuenta que todos los<svg>del elemento interno.100。Esto significa que primero se establece el atributo x<g>realizar la transformación, y luego moverse a lo largo del eje x100, porque<svg>ubicación x = 100。Después de ejecutar, el efecto de la imagen es:

Puedes cambiar el anidamiento, para<svg>elementos anidados en<g>elementos dentro, como se muestra a continuación:

<svg　ancho="320"　alto="150">
<g　transform="girar(45　50　50)">
<svg　x="100">
　　　　<linea　x1="10"　y1="10"　x2="85"　y2="10"　estilo="pincel:　#006600;"></linea>
　　　　<rect　x="10"　y="20"　alto="50"　ancho="75"　estilo="pincel:　#006600;　relleno:　#006600"></rect>
　　　　<texto　x="10"　y="90"　estilo="pincel:　#660000;　relleno:　#660000">w30000">w/codebox.com Tutoriales básicos<
g>/<
g>/text>
g>/<

›10Luego, la forma primero se mueve a lo largo del eje x100, porque la posición del elemento <svg> es x="50", luego gire desde este punto50,450 grados de rotación

codebox.com Tutoriales básicos Además, tenga en cuenta que aunque estas dos imágenes pueden parecer similares, tienen diferencias. La diferencia radica en el orden en que se realizan el movimiento y la rotación. Si observa con atención, también puede ver que la forma mostrada no está colocada uniformemente. Además, tenga en cuenta que incluso si el primer imagen se muestra en forma de puntos en la dirección x en la imagen, también es así. Esto sucede porque primero se giró la forma, y luego el texto se extendió más allá de la imagen en la parte girada.