He introducido muchos elementos gráficos antes. Si muchos elementos gráficos son los mismos, ¿necesito definir uno nuevo cada vez? ¿Podemos compartir algunos gráficos? Este es el foco de esta sección: la reutilización de los elementos SVG.
Combination -g ElementosEl elemento G es un contenedor que combina un grupo de elementos gráficos relacionados en un todo; De esta manera, podemos operar en todo esto. Este elemento generalmente se puede usar junto con los elementos DESC y el título para proporcionar la información de estructura del documento. Los documentos bien estructurados suelen ser bien legibles y renderizados. Ver un pequeño ejemplo:
<svgxmlns = "http://www.w3.org/2000/svg"
versión = "1.1" width = "5cm" height = "5cm">
<Edc> twoGoGrups, cadafoftworectangles </ descir>
<gid = "group1" fill = "rojo">
<rectx = "1cm" y = "1cm" width = "1cm" height = "1cm"/>
<rectx = "3cm" y = "1cm" width = "1cm" height = "1cm"/>
</g>
<gid = "group2" relleno = "azul">
<rectx = "1cm" y = "3cm" width = "1cm" height = "1cm"/>
<rectx = "3cm" y = "3cm" width = "1cm" height = "1cm"/>
</g>
<
<rectx = ". 01cm" y = ". 01cm" width = "4.98cm" height = "4.98cm"
relleno = "Ninguno" Stroke = "Blue" Stroke-width = ". 02CM"/>
</svg>
Algunos puntos a tener en cuenta :1.xmlns = http: //www.w3.org/2000/svg indica que el espacio de nombres predeterminado de todo el elemento SVG es SVG. Esto se puede omitir cuando no hay ambigüedad. Dado que el documento SVG es un documento XML, las reglas relevantes para el espacio de nombres XML son aplicables aquí. Por ejemplo, puede dar el espacio de nombres especificado que se muestra en SVG, proporcionar alias al espacio de nombres, etc.
2.g Los elementos pueden estar anidados.
3. Los elementos gráficos combinados son los mismos que los elementos individuales, y se puede dar el valor de ID. De esta manera, cuando sea necesario (como la animación y la reutilización de un grupo de elementos), puede consultar este valor de identificación.
4. La combinación de un conjunto de elementos gráficos puede establecer los atributos relevantes de este conjunto de elementos (relleno, accidente cerebrovascular, transformación, etc.), que también es un escenario en el que se utilizan combinaciones.
Plantilla - Elemento de símboloEl elemento símbolo se usa para definir una plantilla gráfica (la plantilla puede contener muchos gráficos), que puede ser instanciado por el elemento de uso. Las funciones de la plantilla son muy similares al elemento G, ambas proporcionan un conjunto de objetos gráficos, pero hay algunas diferencias. La diferencia del elemento G es:
1. El elemento símbolo en sí no se representará, solo se representarán las instancias de la plantilla de símbolos.
2. El elemento del símbolo puede tener atributos ViewBox y preservaspectratio, que permiten al símbolo escalar elementos gráficos.
Desde un punto de vista de representación, los elementos similares a los elementos de símbolos son elementos marcadores (que definen flechas y marcadores) y patrón (definición de color); Estos elementos no se representarán directamente; Su uso está básicamente instanciado por el elemento de uso. Es precisamente por esta razón que el atributo de 'visualización' no tiene sentido para el símbolo.
El siguiente código modificado muestra cómo se usa el símbolo:
<svgxmlns = "http://www.w3.org/2000/svg"
xmlns: xlink = "http://www.w3.org/1999/xlink"
versión = "1.1" width = "5cm" height = "5cm">
<Edc> twoGoGrups, cadafoftworectangles </ descir>
<SymbolId = "Group1" Fill = "Red">
<rectx = "1cm" y = "1cm" width = "1cm" height = "1cm"/>
<rectx = "3cm" y = "1cm" width = "1cm" height = "1cm"/>
</símbolo>
<gid = "group2" relleno = "azul">
<rectx = "1cm" y = "3cm" width = "1cm" height = "1cm"/>
<rectx = "3cm" y = "3cm" width = "1cm" height = "1cm"/>
</g>
<Usexlink: href = "#group1" target = "_ blank" rel = "nofollow">
<
<rectx = ". 02cm" y = ". 02cm" width = "4.96cm" altura = "4.96cm"
relleno = "Ninguno" Stroke = "Blue" Stroke-width = ". 02CM"/>
</svg>
Definir el elemento de los defectosSVG le permite definir un conjunto de objetos y luego reutilizarlo (tenga en cuenta que no es solo un objeto gráfico). El ejemplo más común es definir un color de gradiente y luego asignar atributos de relleno a otros objetos gráficos. La definición de color de gradiente no se representará, por lo que los objetos de este tipo se pueden colocar en cualquier lugar. La reutilización a menudo se encuentra en los objetos gráficos, y no queremos renderizar directamente al definir, sino que queremos renderizar en las referencias. Esto se puede implementar utilizando el elemento DEFS.
En términos generales, el enfoque recomendado es colocar el objeto referenciado en el elemento DEFS siempre que sea posible. Estos objetos suelen ser: Altglyphdef, Clippath, cursor, filtro, marcador, máscara, patrón, gradantía lineal, radial, símbolo y objetos gráficos. Definir estos objetos en el elemento DEFS es fácil de entender, por lo que mejora la accesibilidad.
De hecho, los elementos G, los elementos de símbolos y los elementos Defs como objetos de contenedores proporcionan reutilización a diversos grados, pero las características de cada elemento pueden ser ligeramente diferentes: por ejemplo, los elementos G se reproducen directamente, los símbolos y Defs no se reproducirán directamente, el símbolo contiene el atributo del cuadro de vista, que creará una nueva ventana.
Por lo general, a los elementos definidos en DEFS se les asigna un atributo de identificación y se usan directamente donde se usan. Dependiendo de los elementos, estas definiciones se pueden usar en diferentes lugares, como los siguientes colores progresivos como atributos:
<svgwidth = "8cm" height = "3cm"
xmlns = "http://www.w3.org/2000/svg" versión = "1.1">
<SCC> LOCALURIREFERENCIENCIAS DEL ELEMENTO DE LA'DEFS.
<fs defs>
<linealgradientid = "gradiente01">
<stopOffSet = "20%" stop-color = "#39f"/>
<stopOffSet = "90%" stop-color = "#f3f"/>
</linealgradient>
</defs>
<rectx = "1cm" y = "1cm" width = "6cm" height = "1cm"
relleno = "url (#gradiente01)"/>
</svg>
La definición de los elementos relacionados con gráficos se puede vincular al documento utilizando el elemento de uso. Por ejemplo:
<svgwidth = "10cm" altura = "3CM" ViewBox = "0010030" Versión = "1.1"
xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<SCC> EJEMPLEUSE01-SimpleCaseOf'use'ona'rect '</ descr>
<fs defs>
<rectid = "myrect" width = "60" Height = "10"/>
</defs>
<rectx = ". 1" y = ". 1" width = "99.8" altura = "29.8"
relleno = "Ninguno" Stroke = "Blue" Stroke-width = ". 2"/>
<Usex = "20" y = "10" xlink: href = "#myrect"/>
</svg>
Tenga en cuenta el uso del espacio de nombres Xlink aquí. Aunque la mayoría de los espectadores también mostrarán este elemento correctamente sin él, para consistencia, el espacio de nombres XLink debe definirse en el elemento <SVG> </svg>.
Elemento de uso de citasCualquier SVG, símbolo, g, elemento gráfico único y elemento de uso se puede hacer referencia esencialmente (por ejemplo, inicializado) como objetos de plantilla por el elemento de uso. El contenido de gráficos referenciado por uso se representará en la ubicación especificada. A diferencia del elemento de imagen, el elemento de uso no puede hacer referencia a todo el documento.
El elemento de uso también tiene atributos X, Y, ancho y altura. Estos atributos se pueden omitir. Si no se omite, las coordenadas o longitud de contenido de gráficos referenciados se asignarán al espacio de coordenadas del usuario actual.
El proceso de acción del elemento de uso es equivalente a copiar profundamente el objeto referenciado en un árbol DOM no público independiente; El nodo principal de este árbol es el elemento de uso. Aunque es un nodo DOM no público, es esencialmente un nodo DOM. Por lo tanto, todos los valores de atributo, animaciones, eventos y configuraciones relacionadas con CSS del objeto referenciado se copiarán y seguirá funcionando. Además, estos nodos también heredarán los atributos relevantes del elemento de uso y el antepasado de uso (tenga en cuenta que los elementos referenciados son copias profundas, y estos elementos copiados no tienen nada que ver con el elemento original, por lo que los atributos del nodo del Ancestro de elementos referenciado no se heredarán aquí). Si estos nodos mismos tienen atributos relacionados (CSS), también sobrescribirán los atributos heredados, que son consistentes con los nodos DOM comunes, así que tenga cuidado al usar la visibilidad: ocultos para los elementos de uso, y no necesariamente funcionará. Sin embargo, dado que estos nodos no son públicos, en las operaciones DOM, solo puede ver el elemento de uso, por lo que solo puede operar el elemento de uso.
Desde la perspectiva de los efectos visuales, el elemento de uso es más como un marcador de posición, y el efecto visual después de la representación es el mismo que la representación directa con el objeto referenciado:
1.use el elemento se refiere a un elemento de símboloEn este caso, el efecto visual es equivalente a:
(1) Cambie el elemento de uso al elemento G;
(2) Mueva todas las propiedades de uso excepto x, y, ancho, altura, xlink: href al elemento G;
(3) convertir los atributos x e y de uso en traducir (x, y), y agregar al último atributo de transformación del elemento G;
(4) Reemplace el elemento símbolo referenciado con el elemento SVG. Este elemento SVG utilizará explícitamente los atributos de ancho y altura del elemento de uso (el elemento de uso no tiene estos atributos, que es 100%);
(5) Copie profundamente el contenido gráfico del elemento símbolo referenciado en el SVG reemplazado.
2. El elemento de uso se refiere a un elemento SVGEn este caso, el efecto visual es equivalente a:
(1) Cambie el elemento de uso al elemento G;
(2) Mueva todas las propiedades de uso excepto x, y, ancho, altura, xlink: href al elemento G;
(3) convertir los atributos x e y de uso en traducir (x, y), y agregar al último atributo de transformación del elemento G;
(4) Copie el elemento SVG referenciado, incluido el contenido. Este elemento SVG utilizará explícitamente los atributos de ancho y altura del elemento de uso (el elemento de uso no tiene estos atributos y usa el valor original);
3. Otras situacionesEl efecto visual en estos casos es equivalente a:
(1) Cambie el elemento de uso al elemento G;
(2) Mueva todas las propiedades de uso excepto x, y, ancho, altura, xlink: href al elemento G;
(3) convertir los atributos x e y de uso en traducir (x, y), y agregar al último atributo de transformación del elemento G;
(4) copiar los elementos referenciados;
Vea los efectos visuales del siguiente ejemplo :<svgwidth = "10cm" altura = "3CM" ViewBox = "0010030" Versión = "1.1"
xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<SCC> EJEMPLEUSE03-'USE'WITHA'TRANSFORM'ATTRIBUTI
<fs defs>
<rectid = "myrect" x = "0" y = "0" width = "60" Height = "10"/>
</defs>
<rectx = ". 1" y = ". 1" width = "99.8" altura = "29.8"
relleno = "Ninguno" Stroke = "Blue" Stroke-width = ". 2"/>
<Usexlink: href = "#myrect"
transform = "traducir (20,2.5) Rotar (10)"/>
</svg>
La siguiente figura se ve igual a la figura anterior :<svgwidth = "10cm" height = "3CM" ViewBox = "0010030"
xmlns = "http://www.w3.org/2000/svg" versión = "1.1">
<SCC> EJEMPLEUSE03-'USE'WITHA'TRANSFORM'ATTRIBUTI
<rectx = ". 1" y = ". 1" width = "99.8" altura = "29.8"
relleno = "Ninguno" Stroke = "Blue" Stroke-width = ". 2"/>
<gtransform = "traduce (20,2.5) Rotado (10)">
<rectx = "0" y = "0" width = "60" Height = "10"/>
</g>
</svg>
Referencia práctica: Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspxCentro de desarrollo: https://developer.mozilla.org/en/svg
Referencia popular: http://www.chinasvg.com/
Documento oficial: http://www.w3.org/tr/svg11/