HTML5 SVG 2D Introdução 7 - Reutilização e referência de elementos SVG

Autor：Eve Cole Data da Última Atualização：2025-04-12 02:48:01

Eu já introduzi muitos elementos gráficos antes. Se muitos elementos gráficos são iguais, preciso definir um novo sempre? Podemos compartilhar alguns gráficos? Este é o foco desta seção - a reutilização de elementos SVG.

Combinação -g elementos

O elemento G é um recipiente que combina um grupo de elementos gráficos relacionados em um todo; Dessa forma, podemos operar em todo esse. Esse elemento geralmente pode ser usado em conjunto com os elementos DESC e do título para fornecer as informações da estrutura do documento. Os documentos bem estruturados geralmente são bem legíveis e renderizados. Veja um pequeno exemplo:

<svgxmlns = "http://www.w3.org/2000/svg"

versão = "1.1" width = "5cm" altura = "5cm">

<cred> TWOGRoups, cada veztWorecTangles </cred>

</g>

</g>

<!-ShowOutline of Canvasing'rect'Element->

<ctx = ". 01cm" y = ".

preench = "nenhum" golpe = "azul" stroke-width = ". 02cm"/>

</svg>

Alguns pontos a serem observados :

1.xmlns = http: //www.w3.org/2000/svg indica que o espaço nomes padrão de todo o elemento SVG é SVG. Isso pode ser omitido quando não há ambiguidade. Como o documento SVG é um documento XML, as regras relevantes para o espaço para nome XML são aplicáveis aqui. Por exemplo, você pode fornecer o espaço para nome especificado exibido no SVG, fornecer alias ao espaço para nome, etc.

2.g elementos podem ser aninhados.

3. Os elementos gráficos combinados são os mesmos que os elementos individuais e o valor de ID pode ser fornecido. Dessa forma, quando necessário (como animação e reutilização de um grupo de elementos), você pode apenas consultar esse valor de identificação.

4. A combinação de um conjunto de elementos gráficos pode definir os atributos relevantes desse conjunto de elementos (preenchimento, acidente vascular cerebral, transformação etc.), que também é um cenário em que as combinações são usadas.

Modelo - elemento de símbolo

O elemento de símbolo é usado para definir um modelo gráfico (o modelo pode conter muitos gráficos), que podem ser instantados pelo elemento de uso. As funções do modelo são muito semelhantes ao elemento G, ambas fornecendo um conjunto de objetos gráficos, mas existem algumas diferenças. A diferença do elemento G é:

1. O próprio elemento do símbolo não será renderizado, apenas instâncias do modelo de símbolo serão renderizadas.

2. O elemento de símbolo pode ter atributos ViewBox e PreserveasPetratio, que permitem que o símbolo escala elementos gráficos.

Do ponto de vista da renderização, elementos semelhantes aos elementos de símbolo são marcadores (definindo setas e marcadores) e elementos de padrão (definição de cor); Esses elementos não serão renderizados diretamente; O uso deles é basicamente instanciado pelo elemento de uso. É precisamente por esse motivo que o atributo 'exibição' não tem sentido para o símbolo.

O código modificado a seguir mostra como o símbolo é usado:

<svgxmlns = "http://www.w3.org/2000/svg"

xmlns: xlink = "http://www.w3.org/1999/xlink"

versão = "1.1" width = "5cm" altura = "5cm">

<cred> TWOGRoups, cada veztWorecTangles </cred>

</symbol>

</g>

<usexlink: href = "#group1" target = "_ blank" rel = "nofollow">

<!-ShowOutline of Canvasing'rect'Element->

<retx = ". 02cm" y = ".

preench = "nenhum" golpe = "azul" stroke-width = ". 02cm"/>

</svg>

Defina -Defs elemento

O SVG permite definir um conjunto de objetos e reutilizá -lo (observe que não é apenas um objeto gráfico). O exemplo mais comum é definir uma cor gradiente e atribuir atributos de preenchimento a outros objetos gráficos. A definição de cor de gradiente não será renderizada, portanto, os objetos desse tipo podem ser colocados em qualquer lugar. A reutilização é frequentemente encontrada em objetos gráficos, e não queremos renderizar diretamente ao definir, mas queremos renderizar em referências. Isso pode ser implementado usando o elemento DEFS.

De um modo geral, a abordagem recomendada é colocar o objeto referenciado no elemento DEFS sempre que possível. Esses objetos são geralmente: altglyphdef, clippath, cursor, filtro, marcador, máscara, padrão, lineargradiente, radialgradiente, símbolo e objetos gráficos. Definir esses objetos no elemento DEFS é fácil de entender, por isso melhora a acessibilidade.

De fato, os elementos G, elementos de símbolo e defs elementos como objetos de contêiner fornecem reutilização a graus variados, mas as características de cada elemento podem ser um pouco diferentes: por exemplo, os elementos G são renderizados diretamente, o símbolo e os defs não serão renderizados diretamente, o símbolo contém o atribuído ViewBox, que criará uma nova janela.

Geralmente, os elementos definidos nos DEFs recebem um atributo de identificação e usados diretamente onde quer que sejam usados. Dependendo dos elementos, essas definições podem ser usadas em lugares diferentes, como as seguintes cores progressivas como atributos:

<svgwidth = "8cm" altura = "3cm"

xmlns = "http://www.w3.org/2000/svg" versão "1.1">

<cred> Localurireferências com o elemento de 'SoDefs'. </cred>

<FS>

</linearGradient>

</defs>

<ctx = "1cm" y = "1cm" width = "6cm" altura = "1cm"

FILL = "URL (#gradiente01)"/>

</svg>

A definição dos elementos relacionados a gráficos pode ser vinculada ao documento usando o elemento de uso. Por exemplo:

<svgwidth = "10cm" altura = "3cm" viewbox = "0010030" versão = "1.1"

xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">

<cred> ExpletSuse01-simpleCaseof'use'ona'rect '</ccremess>

<FS>

</defs>

<retx = ". 1" y = ". 1" width = "99,8" altura = "29.8"

FILL = "Nenhum" Stroke = "Blue" Stroke-Width = ". 2"/>

</svg>

Observe o uso de namespace xlink aqui. Embora a maioria dos espectadores também exiba esse item corretamente sem ele, para consistência, o espaço para nome do XLink deve ser definido no elemento <svg> </svg>.

Elemento de uso de cotação

Qualquer SVG, símbolo, G, elemento gráfico único e elemento de uso pode ser essencialmente referenciado (por exemplo, inicializado) como objetos de modelo pelo elemento de uso. O conteúdo gráfico referenciado pelo uso será renderizado no local especificado. Ao contrário do elemento de imagem, o elemento de uso não pode referir todo o documento.

O elemento de uso também possui atributos x, y, largura e altura. Esses atributos podem ser omitidos. Se não for omitido, as coordenadas de conteúdo gráfico referenciado ou o comprimento serão mapeadas para o espaço atual de coordenadas do usuário.

O processo de ação do elemento de uso é equivalente a copiar profundamente o objeto referenciado em uma árvore Dom não pública independente; O nó pai desta árvore é o elemento de uso. Embora seja um nó DOM não público, é essencialmente um nó DOM. Portanto, todos os valores de atributo, animações, eventos e configurações relacionadas ao CSS do objeto referenciado serão copiadas e ainda funcionarão. Além disso, esses nós também herdarão os atributos relevantes do elemento de uso e o ancestral de uso (observe que os elementos referenciados são cópias profundas, e esses elementos copiados não têm nada a ver com o elemento original, portanto, os atributos do nó do elemento referenciado não serão herdados aqui). Se esses nós próprios tiverem atributos relacionados (CSS), eles também substituirão os atributos herdados, que são consistentes com os nós do DOM comuns; portanto, tenha cuidado ao usar a visibilidade: oculta para elementos de uso e não funcionará necessariamente. No entanto, como esses nós não são públicos, nas operações DOM, você pode ver apenas o elemento de uso, para que você possa operar apenas o elemento de uso.

Do ponto de vista dos efeitos visuais, o elemento de uso é mais como um espaço reservado, e o efeito visual após a renderização é o mesmo que renderizar diretamente com o objeto referenciado:

1. Use elemento refere -se a um elemento de símbolo

Nesse caso, o efeito visual é equivalente a:

(1) altere o elemento de uso para o elemento G;

(2) Mova todas as propriedades de uso, exceto x, y, largura, altura, xlink: href para o elemento g;

(3) Transforme os atributos X e Y do uso em tradução (x, y) e anexa ao último atributo de transformação do elemento G;

(4) Substitua o elemento de símbolo referenciado pelo elemento SVG. Esse elemento SVG usará explicitamente os atributos de largura e altura do elemento de uso (o elemento de uso não possui esses atributos, que é 100%);

(5) Copie profundamente o conteúdo gráfico do elemento de símbolo referenciado no SVG substituído.

2. O elemento de uso refere -se a um elemento SVG

Nesse caso, o efeito visual é equivalente a:

(1) altere o elemento de uso para o elemento G;

(2) Mova todas as propriedades de uso, exceto x, y, largura, altura, xlink: href para o elemento g;

(3) Transforme os atributos X e Y do uso em tradução (x, y) e anexa ao último atributo de transformação do elemento G;

(4) Copie o elemento SVG referenciado, incluindo o conteúdo. Esse elemento SVG usará explicitamente os atributos de largura e altura do elemento de uso (o elemento de uso não possui esses atributos e usa o valor original);

3. Outras situações

O efeito visual nesses casos é equivalente a:

(1) altere o elemento de uso para o elemento G;

(2) Mova todas as propriedades de uso, exceto x, y, largura, altura, xlink: href para o elemento g;

(3) Transforme os atributos X e Y do uso em tradução (x, y) e anexa ao último atributo de transformação do elemento G;

(4) copiar os elementos referenciados;

Veja os efeitos visuais do exemplo a seguir :

<svgwidth = "10cm" altura = "3cm" viewbox = "0010030" versão = "1.1"

xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">

<ccem> ExpleseUse03-'Use'witha'Transform'attribute </cred>

<FS>

</defs>

<retx = ". 1" y = ". 1" width = "99,8" altura = "29.8"

FILL = "Nenhum" Stroke = "Blue" Stroke-Width = ". 2"/>

<usexlink: href = "#myrect"

transform = "Traduzir (20,2,5) girar (10)"/>

</svg>

A figura a seguir parece a mesma que a figura acima :

<svgwidth = "10cm" altura = "3cm" viewBox = "0010030"

xmlns = "http://www.w3.org/2000/svg" versão "1.1">

<ccem> ExpleseUse03-'Use'witha'Transform'attribute </cred>

<retx = ". 1" y = ". 1" width = "99,8" altura = "29.8"

FILL = "Nenhum" Stroke = "Blue" Stroke-Width = ". 2"/>

</g>

</svg>

Referência prática:

Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centro de Desenvolvimento: https://developer.mozilla.org/en/svg

Referência popular: http://www.chinasvg.com/

Documento oficial: http://www.w3.org/tr/svg11/