SVG - Gradientes

O gradiente se refere à transição suave de uma cor para outra dentro de uma forma. O SVG oferece dois tipos de gradientes.

Linear Gradients - Representa a transição linear de uma cor para outra de uma direção para outra.
Radial Gradients - Representa a transição circular de uma cor para outra de uma direção para outra.

Gradientes Lineares

Declaração

A seguir está a declaração de sintaxe de <linearGradient>elemento. Mostramos apenas os atributos principais.

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

Atributos

Sr. Não.	Nome e Descrição
1	gradientUnits- unidades para definir o sistema de coordenadas para os vários valores de comprimento dentro do gradiente. Se gradienteUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual no local no momento em que o elemento gradiente é usado. Se patternContentUnits = "objectBoundingBox", os valores representam os valores em frações ou porcentagens da caixa delimitadora no elemento de referência no lugar no momento em que o elemento gradiente é usado. O padrão é userSpaceOnUse.
2	x1- coordenada do eixo x do vetor gradiente. Defeault é 0.
3	y1- coordenada do eixo y do vetor gradiente. O padrão é 0.
4	x2- coordenada do eixo x do vetor gradiente. Defeault é 0.
5	y2- coordenada do eixo y do vetor gradiente. O padrão é 0.
6	spreadMethod- indica o método de espalhar o gradiente no elemento gráfico. O padrão é 'pad'.
7	xlink:href - usado para se referir a outro gradiente.

Exemplo

testSVG.htm

<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

Um elemento <linearGradient> definido como sampleGradient.
Em linearGradient, dois deslocamentos são definidos com duas cores.
no elemento ret, no atributo de preenchimento, a url do gradiente é especificada para preencher o retângulo com o gradiente criado anteriormente.

Resultado

Abra textSVG.htm no navegador Chrome. Você pode usar o Chrome / Firefox / Opera para visualizar a imagem SVG diretamente sem qualquer plugin. O Internet Explorer 9 e superior também oferece suporte à renderização de imagens SVG.

Gradientes Radiais

Declaração

A seguir está a declaração de sintaxe de <radialGradient>elemento. Mostramos apenas os atributos principais.

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

Atributos

Sr. Não.	Nome e Descrição
1	gradientUnits- unidades para definir o sistema de coordenadas para os vários valores de comprimento dentro do gradiente. Se gradienteUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual no local no momento em que o elemento gradiente é usado. Se patternContentUnits = "objectBoundingBox", os valores representam os valores em frações ou porcentagens da caixa delimitadora no elemento de referência no lugar no momento em que o elemento gradiente é usado. O padrão é userSpaceOnUse.
2	cx- coordenada do eixo x do centro do maior círculo do vetor gradiente. Defeault é 0.
3	cy- coordenada do eixo y do centro do maior círculo do vetor gradiente. O padrão é 0.
4	r- raio do centro do maior círculo do vetor gradiente. Defeault é 0.
5	fx- ponto focal do gradiente radial. O padrão é 0.
6	fy- ponto focal do gradiente radial. O padrão é 0.
7	spreadMethod- indica o método de espalhar o gradiente no elemento gráfico. O padrão é 'pad'.
8	xlink:href - usado para se referir a outro gradiente.

Exemplo

testSVG.htm

<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>

Um elemento <radialGradient> definido como sampleGradient.
Em radialGradient, dois deslocamentos são definidos com duas cores.
no elemento ret, no atributo de preenchimento, a url do gradiente é especificada para preencher o retângulo com o gradiente criado anteriormente.

Resultado