Introdução ao SVG 2D em HTML5 - Introdução e uso de desenho gráfico (formas básicas)

Autor：Eve Cole Data da Última Atualização：2025-04-03 02:00:03

Forma básica

O SVG fornece muitas formas básicas, e esses elementos podem ser usados diretamente, o que é muito melhor que a tela. Não vamos falar bobagem, basta olhar para os exemplos, este é o mais direto:

<Svg>

<círculo cx = "25" cy = "75" r = "20" stroke = "vermelho" preench = "transparente" stroke-width = "5"/>

<Polyline Points = "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"

Stroke = "laranja" preenchimento = "transparente" stroke-width = "5"/>

<Polygon Points = "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"

Stroke = "verde" preenchimento = "transparente" stroke-width = "5"/>

</svg>

Os resultados exibidos neste HTML são os seguintes:

Este exemplo desenha muitas formas: retângulos normais, retângulos arredondados, círculos, elipses, linhas retas, polígonos e caminhos. Estes são todos os elementos gráficos básicos. Embora existam muitas maneiras de desenhar um gráfico, como o RECT, pode ser implementado usando o RECT ou o caminho, ainda devemos tentar manter o conteúdo do SVG curto, conciso e fácil de ler .

Abaixo estão as instruções para o uso de cada forma (existem apenas as propriedades básicas que controlam a forma e a posição da figura, e as propriedades como o preenchimento são resumidas posteriormente).

Retângulo - elemento ret

Este elemento possui 6 propriedades que controlam posições e formas, a saber:

X: o valor x das coordenadas (sistema de coordenadas do usuário) do canto superior esquerdo do retângulo.

Y: o valor Y das coordenadas (sistema de coordenadas do usuário) do canto superior esquerdo do retângulo.

Largura: largura do retângulo.

Altura: altura do retângulo.

RX: Quando o efeito do canto arredondado é alcançado, o raio do canto arredondado ao longo do eixo x.

RY: Ao alcançar o efeito de canto arredondado, o raio do canto arredondado ao longo do eixo y.

Por exemplo, no exemplo acima, o efeito de canto arredondado é alcançado e você também pode obter o efeito do canto Ellipse definindo RX e RY para valores diferentes.

Círculo - elemento do círculo

As propriedades deste elemento são simples, principalmente para definir o centro e o raio:

R: O raio do círculo.

CX: Valor X da coordenada central.

CY: O valor Y da coordenada central do círculo.

Ellipse - elemento Ellipse

Este é um elemento circular mais geral. Você pode controlar os comprimentos do eixo semi-major e eixo semi-major, respectivamente, para obter diferentes elipses. É fácil pensar que, quando os dois semi-exis são iguais, é um círculo perfeito.

RX: eixo meio major (raio x).

Ry: eixo semi-curto (Y-Radius).

CX: Valor X da coordenada central.

CY: O valor Y da coordenada central do círculo.

Linha - elemento de linha

Uma linha reta precisa definir o ponto de partida e o ponto final:

X1: Coordenada do ponto de partida X.

Y1: o ponto de partida y coordenar.

x2: coordenada do ponto final x.

Y2: o ponto final y coordenar.

Polyline - Elemento Polyline

As polilinas precisam principalmente definir os pontos de extremidade de cada segmento de linha; portanto, apenas o conjunto de um ponto é necessário como parâmetros:

Pontos: Uma série de pontos separados por espaços, vírgulas, linhas de new, etc. Cada ponto deve ter 2 números: X Valor e Y Valor. Portanto, os 3 pontos a seguir (0,0), (1,1) e (2,2) podem ser escritos como: 0 0, 1 1, 2 2.

Polígono - elemento de polígono

Esse elemento deve fazer mais uma etapa que o elemento polyline, conectar o último ponto e o primeiro ponto para formar uma figura fechada. Os parâmetros são os mesmos.

Caminho - elemento do caminho

Este é o elemento mais geral e poderoso; Usando esse elemento, você pode implementar qualquer outra figura, não apenas as formas básicas acima, mas também formas complexas como a curva bezier; Além disso, o uso do caminho pode obter segmentos de transição suaves. Embora a Polyline também possa ser usada para alcançar esse efeito, há muitos pontos que precisam ser fornecidos e o efeito não é bom se ampliado. Este elemento controla a posição e a forma com apenas um parâmetro:

D: Uma série de instruções de desenho e parâmetros de desenho (pontos).

As instruções de desenho são divididas em dois tipos: instruções de coordenadas absolutas e instruções de coordenadas relativas. As letras usadas nessas duas instruções são as mesmas, ou seja, a parte superior e inferior é diferente. As instruções absolutas usam letras maiúsculas e as coordenadas também são coordenadas absolutas; As instruções relativas usam letras minúsculas correspondentes e as coordenadas dos pontos representam compensações.

Instrução de desenho de coordenadas absolutas

Os parâmetros deste conjunto de instruções representam coordenadas absolutas. Supondo que o pincel atual esteja localizado em (x0, y0), a seguinte instrução de coordenada absoluta representa o significado da seguinte maneira:

instrução	parâmetro	ilustrar
M	XY	Mova o pincel para o ponto (x, y)
L	XY	O pincel desenha segmento de linha do ponto atual ao ponto (x, y)
H	x	O pincel desenha segmento de linha horizontal do ponto atual ao ponto (x, y0)
V	y	O pincel desenha segmento de linha vertical do ponto atual ao ponto (x0, y)
UM	rx ry x-eixo de rota de eixo largo-arco-flag sweeplag xy	O pincel desenha um arco do ponto atual ao ponto (x, y)
C	x1 y1, x2 y2, xy	O pincel desenha uma curva bezier cúbica do ponto atual ao ponto (x, y)
S	x2 y2, xy	Versão especial da curva cúbica de Bezier (o primeiro ponto de controle é omitido)
Q	x1 y1, xy	Desenhe uma curva bezier quadrática para o ponto (x, y)
T	XY	Versão especial da curva quadrática bezier (pontos de controle omitidos)
Z	Sem parâmetros	Desenhe uma figura fechada e, se o atributo d não especificar o comando z, desenhe o segmento de linha em vez da figura anexante.

Mova o comando do pincel m, desenhe o comando da linha: l, h, v e feche o comando z são relativamente simples; A seguir, é apresentado um foco nas poucas instruções para desenhar a curva. Instruções de desenho de arco: um rx ry x-rastation rotation grande arco-flag sweeplag xy

É mais complicado conectar 2 pontos com um arco e existem muitas situações, portanto, esse comando possui 7 parâmetros, que controlam cada atributo da curva. A seguir explica o significado do valor numérico:

rx, ry é o comprimento do eixo semi-major e eixo semi-curto do arco

A rotação do eixo x é o ângulo entre o eixo x e a direção horizontal em que este arco está localizado, ou seja, o ângulo de rotação no sentido anti-horário do eixo x e o número negativo representa o ângulo de rotação no sentido horário.

O grande arco é 1 para representar um arco de ângulo grande e 0 para representar um arco de ângulo pequeno.

A flag Sweep é 1, que representa o arco do ponto de partida ao ponto final no sentido horário ao redor do centro, e 0 representa a direção no sentido anti-horário.

x, y são as coordenadas do terminal do arco.

Não vou falar sobre os dois primeiros parâmetros e os dois últimos parâmetros, é muito simples; Vamos falar sobre os três parâmetros no meio:

A rotação do eixo x representa o ângulo de rotação e experimenta as diferenças nos arcos no exemplo a seguir:

<Svg>

<caminho d = "M10 315

L 110 215

A 30 50 0 0 1 162,55 162,45

L 172,55 152.45

A 30 50 -45 0 1 215.1 109,9

L 315 10 "AVC =" preto "preenchimento =" verde "Width =" 2 "Fill-opacity =" 0,5 "/>

</svg>

O HTML acima desenha a figura a seguir:

A partir da figura, podemos ver que os diferentes parâmetros de rotação de elipse levam a diferentes direções do arco desenhado. Obviamente, esse parâmetro não tem efeito no círculo perfeito.

Controle o tamanho e a direção do arco grande e a direção do arco e experimentam as diferenças no arco no exemplo a seguir:

<Svg>

<caminho d = "m80 80

A 45 45, 0, 0, 0, 125 125

L 125 80 z "preenchimento =" verde "/>

<caminho d = "m230 80

A 45 45, 0, 1, 0, 275 125

L 275 80 Z "Fill =" Red "/>

<caminho d = "M80 230

A 45 45, 0, 0, 1, 125 275

L 125 230 z "preenchimento =" roxo "/>

<caminho d = "M230 230

A 45 45, 0, 1, 1, 275 275

L 275 230 z "preenchimento =" azul "/>

</svg>

Este HTML desenha as seguintes figuras:

Do exposto, podemos ver que esses parâmetros são realmente os únicos parâmetros necessários para determinar uma seção do arco. Também se vê aqui que os arcos no SVG são mais complicados do que os da tela.

Desenho CUZIER CUZIER Instruções: C x1 y1, x2 y2, xy

Existem dois pontos de controle na curva bezier cúbica, a saber (x1, y1) e (x2, y2), e o último (x, y) representa o ponto final da curva. Experimente os seguintes exemplos:

<Svg>

<caminho d = "M130 110 C 120 140, 180 140, 170 110" ASSIM

</svg>

Este snippet html desenha a figura a seguir:

Do exposto, podemos ver que o ponto de controle controla o radiano da curva.

Versão especial da curva cúbica bezier: sx2 y2, xy

Muitas vezes, para desenhar uma curva suave, é necessário desenhar a curva continuamente várias vezes. Nesse momento, para suavizar a transição, o ponto de controle da segunda curva é frequentemente o ponto de mapeamento do primeiro ponto de controle da curva do outro lado da curva. Esta versão simplificada pode ser usada no momento. Deve -se notar aqui que, se não houver instruções ou instruções C na frente da instrução S, os dois pontos de controle serão considerados iguais e degenerará na curva quadrática de Bezier; Se a instrução S for usada após a instrução S Outra s ou C, o primeiro ponto de controle da instrução subsequente será definido por padrão para um ponto de mapeamento do segundo ponto de controle da curva anterior. Vamos experimentar:

<Svg>

</svg>

Este fragmento HTML é desenhado da seguinte maneira:

A instrução acima tem apenas um segundo ponto de controle e o primeiro ponto de controle usa um ponto de mapeamento do segundo ponto de controle da instrução da curva anterior.

Desenho de Instruções de Curva Bezier quadrática: QX1 Y1, XY, T XY (versão especial da curva quadrática de Bezier)

A curva quadrática de Bezier possui apenas um ponto de controle (x1, y1), que geralmente é mostrado na figura abaixo:

Se você estiver desenhando uma curva continuamente, também poderá usar a versão simplificada T. Da mesma forma, quando t somente antes dos comandos Q ou T, o ponto de controle do comando t subsequente será definido para o ponto de mapeamento do ponto de controle da curva anterior por padrão. Vamos experimentar:

<Svg>

</svg>

Este fragmento HTML é desenhado da seguinte maneira:

Da mesma forma, se o comando t não for precedido pelo comando q ou t, é considerado que não há ponto de controle e a linha desenhada é uma linha reta.

Instrução de desenho de coordenadas relativas

As letras da instrução de desenho de coordenadas absolutas são as mesmas, exceto que elas são todas minúsculas. Os parâmetros envolvidos nas coordenadas nos parâmetros desse conjunto de instruções representam coordenadas relativas, o que significa que os parâmetros representam o deslocamento do ponto atual para o ponto alvo, um número positivo representa o deslocamento positivo no eixo e um número negativo representa o deslocamento reverso. No entanto, para as instruções z, não há diferença no caso.

Deve -se notar aqui que instruções de coordenadas absolutas e instruções de coordenadas relativas podem ser usadas de maneira mista . Às vezes, o uso misto pode levar a métodos de desenho mais flexíveis.

Notas sobre o desenho do caminho SVG:

Ao desenhar uma figura com orifícios, você deve prestar atenção: o desenho das bordas externas deve ser no sentido anti -horário e a ordem das bordas dos orifícios deve estar no sentido horário. Somente o efeito de preenchimento gráfico desenhado dessa maneira estará correto.

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/