SVG - Degradados
El degradado se refiere a la transición suave de un color a otro dentro de una forma. SVG proporciona dos tipos de degradados.
Linear Gradients - Representa la transición lineal de un color a otro de una dirección a otra.
Radial Gradients - Representa la transición circular de un color a otro de una dirección a otra.
Degradados lineales
Declaración
A continuación se muestra la declaración de sintaxis de <linearGradient>elemento. Solo mostramos los atributos principales.
<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
| No Señor. | Nombre y descripción |
|---|---|
| 1 | gradientUnits- unidades para definir el sistema de coordenadas para los distintos valores de longitud dentro del gradiente. Si gradientUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se utiliza el elemento de degradado. Si patternContentUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento de degradado. El valor predeterminado es userSpaceOnUse. |
| 2 | x1- Coordenada del eje x del vector de gradiente. Defeault es 0. |
| 3 | y1- Coordenada del eje y del vector de gradiente. El valor predeterminado es 0. |
| 4 | x2- Coordenada del eje x del vector de gradiente. Defeault es 0. |
| 5 | y2- Coordenada del eje y del vector de gradiente. El valor predeterminado es 0. |
| 6 | spreadMethod- indica el método de dispersión del degradado dentro del elemento gráfico. El valor predeterminado es 'pad'. |
| 7 | xlink:href - usado para referirse a otro gradiente. |
Ejemplo
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>Un elemento <linearGradient> definido como sampleGradient.
En linearGradient, se definen dos desplazamientos con dos colores.
en el elemento rect, en el atributo de relleno, la URL del degradado se especifica para rellenar el rectángulo con el degradado creado anteriormente.
Salida
Abra textSVG.htm en el navegador web Chrome. Puede usar Chrome / Firefox / Opera para ver la imagen SVG directamente sin ningún complemento. Internet Explorer 9 y versiones posteriores también admiten la reproducción de imágenes SVG.
Gradientes radiales
Declaración
A continuación se muestra la declaración de sintaxis de <radialGradient>elemento. Solo mostramos los atributos principales.
<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
| No Señor. | Nombre y descripción |
|---|---|
| 1 | gradientUnits- unidades para definir el sistema de coordenadas para los distintos valores de longitud dentro del gradiente. Si gradientUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se utiliza el elemento de degradado. Si patternContentUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento de degradado. El valor predeterminado es userSpaceOnUse. |
| 2 | cx- Coordenada del eje x del centro del círculo más grande del vector de gradiente. Defeault es 0. |
| 3 | cy- Coordenada del eje y del centro del círculo más grande del vector de gradiente. El valor predeterminado es 0. |
| 4 | r- radio del centro del círculo más grande del vector de gradiente. Defeault es 0. |
| 5 | fx- punto focal de gradiente radial. El valor predeterminado es 0. |
| 6 | fy- punto focal de gradiente radial. El valor predeterminado es 0. |
| 7 | spreadMethod- indica el método de dispersión del degradado dentro del elemento gráfico. El valor predeterminado es 'pad'. |
| 8 | xlink:href - usado para referirse a otro gradiente. |
Ejemplo
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>Un elemento <radialGradient> definido como sampleGradient.
En radialGradient, se definen dos desplazamientos con dos colores.
en el elemento rect, en el atributo de relleno, la URL del degradado se especifica para rellenar el rectángulo con el degradado creado anteriormente.
Salida
Abra textSVG.htm en el navegador web Chrome. Puede usar Chrome / Firefox / Opera para ver la imagen SVG directamente sin ningún complemento. Internet Explorer 9 y versiones posteriores también admiten la reproducción de imágenes SVG.