Gradiente no SVG

Gradiente SVG pode ser definido como uma transição suave de uma cor para outra. No SVG, existem dois tipos de gradiente, respectivamente: gradiente linear e gradiente radial

Gradiente SVG é um método de preenchimento de forma com cores desiguais. Dessa forma, o preenchimento ou traço da forma pode mudar de uma cor para outra. Para alguns tipos de gráficos, isso realmente parece bem.

Exemplo de gradiente

Este é o aspecto de aplicar gradiente ao preenchimento e traço da forma:

O primeiro retângulo sempre tem a mesma cor de traço, mas com preenchimento de gradiente de verde claro a escuro.
　 　O segundo retângulo aplicou gradiente tanto na cor do traço quanto na cor do preenchimento.
　 　O terceiro retângulo tem gradiente aplicado aos traços, mas sem preenchimento.
　 　O quarto retângulo aplicou gradiente de preenchimento, mas sem traço.

Existem dois tipos de gradientes:

1. Gradiente linear

2. Gradiente radial

As próximas seções irão introduzir esses dois aspectos.

Gradiente linear

O gradiente linear muda de uma cor para outra de forma linear e uniforme. No início deste artigo, você já viu alguns exemplos simples de gradiente linear.

As cores podem variar verticalmente, horizontalmente ou ao longo do vetor que você define. Você também pode usar o gradiente para preencher apenas uma parte da forma, não toda a forma. Antes de continuar, aqui estão alguns exemplos visuais:

O primeiro retângulo usa gradiente vertical. O segundo retângulo usa gradiente horizontal. O terceiro retângulo usa gradiente diagonal (escurecendo para baixo e para a direita). O quarto retângulo usa apenas o gradiente para preencher a metade direita do retângulo. Com o gradiente linear do SVG, tudo isso é possível.

O gradiente linear é usado<linearGradient>definido pelo elemento. Este é um exemplo:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600" stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect x="10" y="10" width="75" height="100" rx="10" ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke: #005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

Como você vê,<linearGradient>-elemento está aninhado em<defs>-elemento.<defs>-elemento, portanto, podem ser referenciados em imagens SVG. Neste exemplo, o gradiente linear é definido pela propriedade CSS (fill:url(#myLinearGradient1))）no <rect>seustyleatravés do atributo-elemento de referência.

Este<linearGradient>-elemento tem dois elementos aninhados<stop>-elements). do<linearGradient>-elemento controla o que antes e depois da aplicação do gradiente (a direção do evento espreadMethodAtributo). O<stop>-elements controlam as cores usadas no gradiente, a distância da forma até o ponto de partida e de parada da cor, além da opacidade do gradiente.

Este é<linearGradient>-lista de atributos do elemento:

Este é<stop>lista de atributos do elemento:

Lembrar todas essas descrições de atributos não é fácil. Isso criou uma imagem para explicar o significado desses atributos:

Esta é a definição de gradiente linear que coincide com a imagem:

　　　　<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop　offset="10%"　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　　　<stop　offset="30%"　stop-color="#006600" stop-opacity="1"/>
　　　　　　　　<stop　offset="70%"　stop-color="#cc0000"　stop-opacity="1"/>
　　　　　　　　<stop　offset="90%"　stop-cor="#000099" stop-opacity="1"/>
　　　　　　</linearGradient>
　　　　</defs>
　　　　<rect x="10" y="10" width="500" altura="50" rx="10" ry="10"
　　　　　　　style="fill:url(#myLinearGradient1); cor: #005000;
　　　　　　　　　　　　　　stroke-width:　3;"　/>
　　　　</svg>

A primeira cor de parada é #00cc00, a partir de10% começa a entrar no retângulo. Devido aospreadMethodé configurado para “espessar”, a primeira cor também é preenchida no retânguloantesA primeira cor da parada-10%).

do primeiro cor final10% da cor torna-se a segunda cor final #006600, até o canto30％.

do segundo cor final30% torna-se o terceiro cor final #cc0000 (vermelho), até o canto70％.

do terceiro cor final70% torna-se o quarto e último cor final #000099azul), até90% de90% até a parte restante do retângulo, a última cor final (#000099) é preenchido no retângulo, porquespreadMethod 　 　A<linearGradient>O atributo do elemento está configurado para “espessar”.

Gradiente radial

A gradiente radial é onde as cores mudam de maneira circular, não linear.

Como você vê, as cores agora mudam de maneira circular. Os três últimos (verdes) retângulos mudam apenas no centro de radiação mais pálido. O primeiro retângulo verde tem cores se espalhando a partir do centro do retângulo. O segundo retângulo usa o meio superior do retângulo. O terceiro retângulo tem o canto superior esquerdo como centro.

A gradiente radial é definida usando<radialGradient>definido pelo elemento. Este é um exemplo:

<svg largura="512" height="120">
<defs>
<radialgradient id="myRadialGradient4" fx="5%" fy="5%" r="65%" métodoDistribuição="espessar"><stop offset="0%" stop-cor="#00ee00" stop-opacity="1></stop>
<stop　offset="100%"　stop-color="#006600" stop-opacity="1></stop>/radialgradient>/defs>
<rect x="340" y="10" width="100" altura="100" rx="10" ry="10" estilo="fill:url(#myRadialGradient4); cor: #005000; cor-width:　3;<//rect>
　　　</svg>

Este código SVG realmente define o quarto retângulo mostrado no exemplo acima. Observe como<stop>Usa o elemento para definir cores, como uma gradiente linear (para mais informações, veja a gradiente linear).

Este é<radialGradient> 　 　Lista de atributos do elemento:

O centro da gradiente radial é o centro de difusão de cor circular. Se você descrever a gradiente radial como um círculo， os cx e cy marcam o centro do círculo.

O foco da gradiente radial é o ângulo de radiação colorida. Se você considerar a gradiente radial como uma lâmpada， o foco determina o ângulo de colisão da luz da lâmpada com a forma.50％，50％representa diretamente de cima.5％，5％representa de cima para baixo. O gradiente parece um pouco como uma fonte de luz iluminando sua forma.

Antes de configurar corretamente o gradiente， você provavelmente precisará tentar o centro e o foco do gradiente. Eu sei que faço isso para criar esses exemplos simples.

transformar o gradiente

Você pode usar transformações padrãoTransformações SVGfunção para transformar o gradiente. Fazer isso usagradientTransformpropriedades，em<linearGradient>e 　 　 <radialGradient>。这是一个示例：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad"gradientTransform="rotate(45)"
　　　　>
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600" stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect x="10" y="10" width="75" height="100" rx="10" ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke: #005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

Este exemplo define um comgradientTransform() 　Gradiente linear da propriedade, que roda o gradiente45Grau. Geralmente, o gradiente escalona as cores de cima para baixo, mas agora, através da rotação, ele vai do canto superior direito para o canto inferior esquerdo.

Efeito de Imagem Após Execução: