Gradiente radial SVG
Descripción del elemento <radialGradient>
El elemento <radialGradient> especifica un gradiente radial SVG que se puede aplicar al relleno y al trazo de elementos gráficos.
El elemento <radialGradient> debe estar anidado dentro de un elemento <defs>, que significa definiciones. El elemento <defs> contiene definiciones de elementos específicos (por ejemplo, gradientes).
peligro
No confunda un gradiente radial SVG con la función CSS radial-gradient. Los gradientes CSS se pueden aplicar al fondo de cualquier elemento, mientras que los gradientes SVG solo se aplican a elementos SVG.
Ejemplo del elemento SVG <radialGradient>:
Ejemplo del elemento SVG <radialGradient>
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<defs>
<radialGradient id="example" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<!-- Center: transparent -->
<stop offset="0%" stop-color="rgb(245,245,245)" stop-opacity="0" />
<!-- Edge: solid light green -->
<stop offset="100%" stop-color="rgb(144, 238, 144)" stop-opacity="1" />
</radialGradient>
</defs>
<ellipse cx="250" cy="100" rx="95" ry="65" fill="url(#example)" /> Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Atributos
| Atributo | Descripción |
|---|---|
| cx | Especifica la coordenada x del círculo final del gradiente. |
| cy | Especifica la coordenada y del círculo final del gradiente. |
| r | Especifica el radio del círculo final del gradiente. |
| fx | Especifica la coordenada x del círculo inicial del gradiente. |
| fy | Especifica la coordenada y del círculo inicial del gradiente. |
| gradientUnits | Especifica el sistema de coordenadas para cx, cy, r, fx y fy. Valores: objectBoundingBox (predeterminado) o userSpaceOnUse. |
| gradientTransform | Aplica una transformación adicional al sistema de coordenadas del gradiente. |
| href | Referencia URL a un elemento “radialGradient” o “linearGradient” diferente. |
| spreadMethod | Especifica cómo se comporta el gradiente cuando comienza o termina dentro de los límites de los objetos que lo contienen. Valores: pad, repeat o reflect. |
El elemento SVG <radialGradient> también admite los Atributos globales y los Atributos de eventos.
Práctica
¿Cuáles son los atributos del elemento 'radialGradient' en SVG?