HTML5 SVG 2D Introdução 8 - Estrutura de documentos e resumo de elementos relacionados

Autor：Eve Cole Data da Última Atualização：2025-04-10 04:16:01

Eu introduzi muitos elementos básicos, incluindo combinações relacionadas à estrutura e elementos de reutilização. Aqui, resumirei brevemente os elementos relacionados restantes na estrutura do documento SVG e continuarei a apreciar outros recursos do SVG.

Os elementos dos documentos SVG podem ser basicamente divididos nas seguintes categorias:

• Elementos de animação: animate, animatecolor, animatemotion, animateTransform, set;

• Elementos de explicação: desc, metadados, título;

• Elementos gráficos: círculo, elipse, linha, caminho, polígono, poliina, rect;

• Elementos estruturais: defs, g, svg, símbolo, uso;

• Elementos de gradiente: lineargradiente, radialgradiente;

• Outros elementos: A, Altglyphdef, Clippath, Profilé de cores, cursor, filtro, fonte, font-face, ForeignObject, imagem, marcador, máscara, padrão, script, estilo, interruptor, texto, vista, etc.

Entre eles, elementos gráficos, elementos de gradiente, texto, elementos de imagem e combinações foram introduzidos. A seguir, estão vários outros elementos relacionados à estrutura.

Elemento Window-SVG

Quaisquer outros elementos podem ser colocados em qualquer ordem no elemento SVG, incluindo elementos SVG aninhados.

As propriedades suportadas pelo elemento SVG são comumente usadas, nomeadamente ID, classe, x, y, largura, altura, viewbox, preserveaspetratio e atributos relacionados a preenchimento e acidente vascular cerebral.

Os eventos suportados pelo elemento SVG também são comumente usados ONLOAD, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEDOWN, ONMOUSEUP, ONCLICK, ONFOCUSIN, ONFOCUSOUT, ONRESize, OnScroll, Onunload, etc. Não vou falar sobre o elemento SVG. Para obter os atributos completos e a lista de eventos, consulte a documentação oficial abaixo.

Elementos explicativos - elementos descurrinados e elementos de título

Cada elemento do contêiner (que pode conter outros elementos ou elementos do contêiner de elementos gráficos, como: a, defs, glifos, g, marcador, máscara, falta de glifo, padrão, SVG, símbolo e símbolo) e elementos gráficos podem conter elementos DESC e título. Esses dois elementos são elementos auxiliares e são usados para explicar a situação relevante; O conteúdo deles é texto. Quando o documento SVG for renderizado, esses dois elementos não serão renderizados nos gráficos. A diferença entre os dois elementos não é muito grande. O título aparece como uma mensagem rápida em algumas implementações; portanto, o título geralmente é colocado na primeira posição do elemento pai.

Os usos típicos são os seguintes:

<g>

<title> Companysalesbyregion </title>

<cred>

Thisabarchart, que mostra

Companysalesbyregion.

</cc>

<!-barchartDefinedAsVectordata->

</g>

</svg>

Geralmente, o elemento SVG mais externo deve ser acompanhado por uma descrição do título, para que o programa seja legível melhor.

Elemento marcador

As tags definem elementos gráficos (setas e marcadores de vários pontos) anexados a um ou mais vértices (verticles de caminho, linha, poliina ou polígono). As setas podem ser conectadas ao ponto de partida ou ao ponto final do caminho, linha ou polilinha. Tags de vários pontos podem anexar uma tag a todos os vértices de caminho, linha, poliina ou polígono.

O marcador é definido pelo elemento marcador e, em seguida, define os atributos relevantes (marcador, marcador de partida, marcador-médio e marcador) no caminho, linha, poliina ou polígono. Veja um exemplo:

<svgwidth = "4in" altura = "2in"

ViewBox = "0040002000" versão = "1.1"

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

<FS>

<Markerid = "Triangle"

ViewBox = "001010" refx = "0" refy = "5"

Markerunits = "StrokeDth"

MarkerWidth = "4" MarkerHeight = "3"

Orient = "Auto">

</parker>

</defs>

<cred> PlacinganarrowheadatthendoFapath.

</cc>

<PATHD = "M1000750L2000750L25001250"

preench = "nenhum" golpe = "preto" stroke-width = "100"

Marker-end = "URL (#Triangle)"/>

</svg>

Vamos dar uma olhada no conhecimento relevante do marcador em detalhes :

1. Marcador é um elemento de contêiner, que pode armazenar elementos gráficos, elementos de contêiner, animações, elementos de gradiente etc. em qualquer ordem.

2. O elemento marcador pode criar uma nova janela: Defina o valor do ViewBox.

3. Mais atributos importantes do marcador:

Markerunits = StrokeWidth | UserspaceOnuse

Esta propriedade define o sistema de coordenadas usado pelo conteúdo da largura do marcador de propriedades, marcador e marcador. Esta propriedade possui 2 valores para escolher. A largura do primeiro valor é o valor padrão. O sistema de coordenadas usado pelo conteúdo da largura do marcador de atributos, MarkerHeight e Marker são iguais ao valor definido pela largura do AVC do elemento gráfico do marcador.

Por exemplo, no exemplo acima, a largura do elemento marcador é 400 e a altura é 300. No entanto, não o confunda. As coordenadas usadas pelo caminho no elemento Mark são o novo sistema de coordenadas do usuário definido pelo ViewBox.

Outro valor desse atributo é o UsersPaceOnuse, que representa o conteúdo da largura de marcador de atributos, marcador e marcador usando o sistema de coordenadas que se refere aos elementos gráficos do marcador.

Refx, refy: define as coordenadas de posição do ponto referenciado alinhado com o marcador. Por exemplo, no exemplo acima, o ponto referenciado é o ponto final e deve estar alinhado à posição (0,5) do marcador. Observe que Refx e Refy usam o sistema de coordenadas do usuário final transformado pelo ViewBox.

Marcador, MarkerHeight: A largura e a altura da janela do marcador, isso é fácil de entender.

Orientado: define o ângulo da rotação do marcador. Você pode especificar um ângulo ou atribuir diretamente o automóvel.

Auto representa a direção positiva do eixo x e gira de acordo com as seguintes regras :

um. Se o ponto em que o marcador está localizado pertence a apenas um caminho, a direção direta do eixo x do marcador é a mesma que o caminho. Veja o exemplo acima.

b. Se o ponto em que o marcador está localizado pertence a dois caminhos diferentes, a direção direta do eixo x do marcador é consistente com a linha de equalização do ângulo do ângulo entre os dois caminhos.

4. Atributos do marcador de elementos gráficos

Para fazer referência a um marcador, os atributos relevantes precisam ser usados, principalmente esses três: marcador de marcador (coloque o marcador referenciado no ponto de partida), marker-med (coloque o marcador referenciado em todos os pontos, exceto o ponto de partida e o ponto final), marcador (coloque o marcador referenciado no ponto final). Os valores desses três atributos podem ser nenhum (representa que o marcador não é citado), referência de marcador (refere -se a um determinado marcador), herdado (escusado será dizer).

Você também pode ver o uso do marcador do exemplo acima.

Script e estilo - elemento de script e elemento de estilo

De fato, basicamente todos os atributos (para todos os elementos, não apenas o texto) podem ser associados a um elemento ao CSS, e todos os atributos CSS estão disponíveis na imagem SVG. Você pode usar diretamente os atributos de estilo para projetar o estilo de um elemento ou consultar o estilo de um elemento de design de chapas de estilo. As folhas de estilo não devem ser analisadas para arquivos XML (porque ocasionalmente contêm caracteres que causam problemas), portanto precisam ser colocados na seção XMLCData. O mesmo vale para os scripts e eles precisam ser colocados na seção XMLCData. Veja o seguinte exemplo CSS:

<cred> texto </cc> <defs>

<! [CDATA [

.ABBREVIATION {Decoração de texto: sublinhado;}

]]>

</style>

</defs>

<g>

<textx = "20" y = "50" font-size = "30"> colorsCanBepespecificada </sext>

<textx = "20" y = "100" font-size = "30"> por seu

<tspanfill = "rgb (0,0,255)" class = "abreviation"> b </tspan> valores </sext>

<textx = "20" y = "150" font-size = "30"> orbykeywordsssuchas </sext>

)

</sext>

</g>

</svg>

Vejamos o exemplo do script:

<cred> scriptstheOnClickeven </ccem>

<FS>

<! [CDATA [

functionHidereveal (EVT) {

variableTarget = evt.target;

varthefill = imageTarget.getAttribute ("preenchimento");

if (thefill == 'branco')

ImageTarget.SetAttribute ("Fill", "URL (#Notes)");

outro

ImageTarget.SetAttribute ("Fill", "White");

}

]]>

</script>

<batterid = "Notes" x = "0" y = "0" width = "50" Height = "75"

PatternTransform = "Gire (15)"

Patternunits = "UserspaceOnuse">

<linhax1 = "20" y1 = "30" x2 = "20" y2 = "0"

Stroke-width = "3" AVC = "Black"/>

<linhax1 = "20" y1 = "0" x2 = "30" y2 = "5"

Stroke-width = "3" AVC = "Black"/>

</padrão>

</defs>

<ellipseonClick = "hidereveal (evt)" cx = "175" cy = "100" rx = "125" ry = "60"

FILL = "URL (#Notes)" Stroke = "Black" Stroke-Width = "5"/>

</svg>

Processamento condicional - elemento de comutação

Atributos de processamento condicional são atributos que podem controlar se o elemento é renderizado ou não. Basicamente, a maioria dos elementos (especialmente elementos gráficos) pode especificar propriedades de processamento condicional. Existem 3 propriedades de processamento condicional: requeridas features, necessidades de extensões e SystemLanguage. Essas propriedades são um conjunto de testes, que permitem especificar uma lista de valores (as duas primeiras propriedades são separadas por espaços, e as propriedades do idioma são separadas por vírgulas) e os valores padrão são verdadeiros.

O elemento Switch do SVG fornece a capacidade de renderizar de acordo com as condições especificadas. O elemento do comutador é um elemento de contêiner que pode conter elementos gráficos, elementos explicativos, elementos de animação, A, ForeignObject, G, Image, SVG, Switch, Text, Uso e outros elementos. O elemento do comutador verificará os atributos de processamento condicional dos elementos filho diretos em ordem e, em seguida, renderizará o primeiro elemento filho que atende às suas próprias condições. Outros elementos infantis serão ignorados. Essas propriedades, como as propriedades de exibição, afetarão apenas a renderização de elementos que usam essas propriedades diretamente e não afetarão os elementos referenciados (como os elementos referenciados pelo uso). Simplificando, esses três atributos afetarão elementos como A, Altglyph, ForeignObject, TextPath, Tref, Tspan, Animate, Animatecolor, Animatemotion, AnimateTransform, Set, etc., e não afetarão elementos como outros, o cursor, a máscara, o clippath, os elementos (esses elementos não são renderizados, ou se referem a outros).

NOTA : Os valores de atributo de exibição e visibilidade do elemento filho não afetam o resultado do julgamento da condição do elemento da chave.

Para a lista de valores para atributos de processamento condicional, consulte o documento oficial. Aqui está um pequeno exemplo:

<witch>

<RectrequiredFeatures = "http://www.w3.org/tr/svg11/feature#filter"

x = "10" y = "10" largura = "322" altura = "502" opacity = "0,6"

FILL = "Black" Stroke = "Nenhum" filtro = "URL (#GBLSHADOW)"/>

<retx = "10" y = "10" width = "322" altura = "502" opacity = "0,6"

FILL = "Black" Stroke = "Nenhum"/>

</switch>

O significado deste exemplo é simplesmente: o navegador usado suporta o recurso de filtro e desenhe o retângulo acima (com o atributo de filtro). Se o recurso de filtro não for suportado, desenhe o retângulo abaixo.

De fato, mais frequentemente, o atributo mais usado é o SystemLanguage, que é a capacidade de processamento de múltiplas linguagens do texto. Por exemplo:

<witch>

</switch>

</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/