Propriedade de Preenchimento SVG

A definição de preenchimento de formas SVG define a cor dentro do contorno da forma. Em outras palavras, a superfície da forma. O preenchimento é um dos atributos CSS básicos que você pode configurar para qualquer forma SVG.

Exemplo de preenchimento

O preenchimento de formas SVG é o preenchimento dentro da contorno da forma. Este é um exemplo de preenchimento de SVG:

<svg largura="500" altura="100"><círculo cx="50"　cx="50"　cy="250"　r="
　　　　　　　　style="contorno: none; preenchimento: #0000ff;"　/></svg>

Este exemplo define um círculo com cor de preenchimento azul (#0000ff) sem cor de contorno. A seguir está a imagem gerada:

Exemplo de contorno e preenchimento

Você pode combinar cores de contorno e preenchimento de SVG para formar formas SVG. Este é um exemplo de contorno e preenchimento de SVG:

<svg largura="500" altura="100"><círculo cx="50"　cx="50"　cy="250"　r="
　　　　　　　　style="contorno: #000066; preenchimento: #3333ff;"　/></svg>

Este exemplo usa azul mais escuro (#000066)cor de contorno e azul mais claro (#3333ff)填充颜色定义圆。 以下是生成的图像：

preenchimento-opacity

ff) define a cor de preenchimento do círculo. A seguir está a imagem gerada：-opacity-A propriedade CSS de SVG fill1A opacidade é usada para definir a opacidade da cor de preenchimento da forma. fill1A opacidade de preenchimento usa valores entre 0 e-entre os valores. Quanto mais próximo de 0, mais transparente é o preenchimento. Quanto mais próximo1，o valor de preenchimento é mais opaco. O valor padrão de preenchimento

，o que significa que a cor de preenchimento é completamente opaca. A opacidade de preenchimento é-Este é um exemplo de opacidade de preenchimento SVG fill-A exemplo de opacidade，com dois círculos que têm diferentes (fill

<svg largura="500" altura="120">
<text　x="22"　y="40">Texto　Behind　Shape</text>
<circle　cx="50"　cx="50"　cy="250"　r="
　　　　　　　　"
　　　　　　　　　　　　　　　preenchimento-style="stroke:　none;　fill:　#0000ff;3opacity:　0./path>
<circle　cx="120"　cx="50"　cy="250"　r="
　　　　　　　　"
　　　　　　　　　　　　　　　preenchimento-style="stroke:　none;　fill:　#0000ff;7opacity:　0./path>
</svg>

;　　"><

Texto por Trás da Forma-A opacidade é maior que a do círculo à esquerda. Observe que o texto atrás do círculo à direita é menos visível do que o texto atrás do círculo à esquerda. Isso é porque o círculo à direita fill

preenchimento-rule

preenchimento-A regra rule determina o modo de preenchimento de formas complexas. fill-Os valores da regra rule podem ser dois diferentes．Esses valores são：

• nonzero

• evenodd

Normalmente，esses dois valores determinam as regras internas e externas da forma. Apenas preenchimento interno，para um círculo，isto é simples，mas para formas mais complexas，isto não é tão fácil. Veja este exemplo de <path>：

<svg largura="500" altura="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　　　　estilo="tracejamento: "#000000;
　　　　　　　　　preenchimento: "#6666ff;
　　　　　　　　　preenchimento-rule:　nonzero;
　　　　　　></path>
<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　　　　estilo="tracejamento: "#000000;
　　　　　　　　　preenchimento: "#6666ff;
　　　　　　　　　preenchimento-rule:　nonzero;"></path>
</svg>

Estes dois exemplos de caminhos têm8linhas，cada uma desenhada com um losango，onde o losango maior contém o menor losango. No caminho à esquerda，o losango interno é desenhado da esquerda para a direita (sentido horário). No caminho à direita，o losango interno é desenhado da direita para a esquerda (sentido anti-horário). Isso é usando fill-rule：non-O resultado da imagem ao desenhar zero

Como você vê，a regra nonzero determina a direção e a forma do losango interno dentro da forma. A regra nonzero que determina se um ponto está dentro ou fora da forma é：

Desenhe uma linha (raio) de ponto a infinito em qualquer direção. Cada vez que o caminho na forma atravessa este raio，se o caminho passar pelo raio da esquerda para a direita，1Adicione ao contador；se o caminho passar pela linha de射线 da direita para a esquerda，subtraia do contador1Após calcular todos os caminhos que atravessam a linha de射线，se o total for zero，o ponto é considerado fora do caminho. Se o total não for zero，o ponto é considerado dentro do caminho.

Este é um exemplo de caminho idêntico, usando fill-rule：evenodd

<svg largura="500" altura="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　estilo="tracejamento: "#000000;
　　　　　　preenchimento: "#6666ff;
　　　　　　preenchimento-regra: "evenodd";"/path>
<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　estilo="tracejamento: "#000000;
　　　　　　preenchimento: "#6666ff;
　　　　　　preenchimento-regra: "evenodd";"/path>
</svg>

Efeito da imagem após a execução:

A expressão literal "evenodd" significa "impar/par". Seguindo essa regra, para determinar se um ponto está dentro de um gráfico, faça um raio em qualquer direção a partir do ponto e verifique o número de interseções do raio com o caminho do gráfico. Desenhe uma linha (raio) de qualquer direção do ponto para o infinito. Cada vez que o caminho passar pelo raio, aumente um contador. Se o total for par, o ponto está fora. Se o total for ímpar, o ponto está dentro da forma.