Antes, nos concentramos em resumir várias formas, textos e imagens. Em seguida, resumiremos o processamento de cores, ou seja, os efeitos de preenchimento e borda, enquanto discutimos a tela. Você descobrirá que o conteúdo aqui é basicamente o mesmo que a tela. Essas propriedades podem ser escritas em elementos como atributos ou armazenadas no CSS (isso é diferente da tela).
Preencha a cor - atributo de preenchimento Esta propriedade usa a cor definida para preencher o interior da figura. É muito simples de usar. Basta atribuir o valor da cor a esta propriedade diretamente. Veja o exemplo:<ret X = "10" y = "10" Stroke = "Blue" Fill = "Red"
Fill-opacity = "0,5" AVC-OPACIDADE = "0,8"/>
No exemplo acima, um retângulo vermelho e azul é desenhado. Alguns pontos a serem observados:
1. Se o atributo de preenchimento não for fornecido, o preto preto será usado por padrão. Se você deseja cancelar o preenchimento, precisará defini -lo como nenhum.
2. Você pode definir a transparência do preenchimento, isto é, a opacidade de preenchimento e o intervalo de valor é de 0 a 1.
3. Um um pouco mais complicado é o atributo de preenchimento . Esta propriedade define um algoritmo que determina se o ponto pertence à faixa de preenchimento; Além do herdar, existem dois valores:
NECTAIS : O algoritmo usado para esse valor é emitir linhas do ponto que precisa ser julgado em qualquer direção e calcular a direção do ponto de interseção entre a figura e o segmento de linha; O resultado do cálculo começa de 0, e todo segmento de linha em um cruzamento é da esquerda para a direita, adicione 1; Todo segmento de linha em um cruzamento é da direita para a esquerda, subtraindo 1; Depois de calcular todos os pontos de interseção dessa maneira, se o resultado desse cálculo não for igual a 0, o ponto está na figura e precisar ser preenchido; Se o valor for igual a 0, ele não precisará ser preenchido fora da figura. Consulte o seguinte exemplo: EVENDD : O algoritmo usado para este valor é emitir linhas do ponto que precisa ser julgado em qualquer direção e calcule o número de pontos em que a figura e o segmento de linha se cruzam. Se o número for ímpar, o ponto será alterado para a figura e precisará ser preenchido; Se o número for par, o ponto está fora da figura e não precisará ser preenchido. Veja o exemplo na figura abaixo: Cor da borda - atributo de AVC O exemplo acima usou o atributo de AVC. Esse atributo usa o valor definido para desenhar a borda da figura, que também é muito direta para usar. Basta atribuir o valor da cor a ele. Perceber:1. Se o atributo de AVC não for fornecido, a borda do gráfico não será desenhada por padrão.
2. Você pode definir a transparência da borda, que é a opacidade do golpe , e a faixa de valor é de 0 a 1.
De fato, a situação das arestas é um pouco mais complicada que o interior do gráfico, porque, além da cor, as arestas também têm formas que precisam ser definidas.
Ponto de extremidade da linha - Propriedade de AVC -Linecap
Esta propriedade define o estilo do ponto de extremidade do segmento de linha. Esta propriedade pode usar três valores de bunda, quadrado e redondo . Veja o exemplo:<Svg>
<linha x1 = "40" x2 = "120" y1 = "20" y2 = "20" Stroke = "Black" stroke-width = "20" AVC-linecap = "Butt"/>
<linha x1 = "40" x2 = "120" y1 = "60" y2 = "60" Stroke = "Black" stroke-width = "20" AVC-linecap = "Square"/>
<linha x1 = "40" x2 = "120" y1 = "100" y2 = "100" Stroke = "Black" stroke-width = "20" AVC-linecap = "Round"/>
</svg>
Este código desenha 3 linhas usando diferentes estilos de terminais de linha.
Da imagem à esquerda, podemos ver facilmente a diferença nos estilos em 3.
Conexão de linha - atributo Stroke -lineJoin Esta propriedade define o estilo na conexão de segmentos de linha. Esta propriedade pode usar os três valores de Mitre, redonda e chanfro . Veja o exemplo:<Svg>
<Polyline Points = "40 60 80 20 120 60" AVC = "Black" Stroke-Width = "20"
AVC-linecap = "butt" preench = "transparente" stroke-lineJoin = "miter"/>
<Polyline Points = "40 140 80 100 120 140" AVC = "Black" Stroke-Width = "20"
AVC-linecap = "redondo" preenchimento = "transparente" AVC-lineJoin = "redondo"/>
<Polyline Points = "40 220 80 180 120 220" AVC = "Black" Stroke-Width = "20"
AVC-linecap = "square" preench = "transparente" stroke-lineJoin = "chanfro"/>
</svg>
Da imagem à esquerda, podemos ver facilmente a diferença de estilo em 3.
O atributo virtual e real - atributo de debarração de derrame
Esta propriedade pode definir as linhas virtuais e reais do segmento de linha. Veja o exemplo:<Svg>
<caminho d = "m 10 75 q 50 10 100 75 t 190 75" Stroke = "Black"
AVC-linecap = "redondo" stroke-destray = "5,10,5" preench = "nenhum"/>
<caminho d = "m 10 75 L 190 75" Stroke = "Red"
AVC-LINECAP = "ROUND" WIDTH = "1" ASSLANTE DASSARRAY = "5,5" FILL = "NENHUM"/>
</svg>
Essa propriedade define algumas colunas de números, mas esses números devem ser separados por vírgula.
Obviamente, os espaços podem ser incluídos no atributo, mas os espaços não são usados como delimitadores. Cada número
O comprimento do segmento de linha sólido é definido e é ciclado na ordem de desenho e não desenho.
Portanto, a linha desenhada no exemplo à esquerda é uma linha sólida com 5 unidades, deixando espaços com 5 unidades.
Desenhe 5 unidades de linhas sólidas ... e continue assim.
Além dessas propriedades comumente usadas, as seguintes propriedades podem ser definidas:
AVC-miterlimit : É o mesmo que na tela, que lida com o efeito de mitra na conexão entre quando e se a linha for desenhada. Stroke-Dashoffset : Esta propriedade define a posição em que a linha pontilhada começa a ser desenhada. Use CSS para exibir dados O HTML5 fortalece a idéia de DIV+CSS; portanto, a parte que exibe os dados também pode ser entregue ao CSS para processamento. Comparado com os elementos HTML comuns, é apenas a cor de fundo e a borda substituída por preenchimento e acidente vascular cerebral. A maioria dos outros é semelhante. Vamos dar um breve exemplo:#Myrect: hover {
AVC: preto;
preenchimento: azul;
}
Não é muito familiar? É tão simples.
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/