SVG Gradient - Radioactive
SVG radiactivo gradual - <radialGradient>
<RadialGradient> se utiliza para definir el gradiente radial.
<RadialGradient> etiqueta debe estar anidada dentro de <defs> interior. etiqueta <Def> son las definiciones siglas, tales como elementos especiales que se pueden definir como gradiente.
Ejemplo 1
Definir un gradiente radial de blanco a azul ovalado:
Aquí está el código SVG:
Ejemplos
<Xmlns = Svg "http://www.w3.org/2000/svg" version = "1.1">
<Def>
<RadialGradient id = cx = "50%" cy = "50%" r = "50%" fx = fy "grad1" "50%" = "50%">
<Stop compensado = estilo "0%" = "stop-color: rgb (255,255,255);
dejar de opacidad: 0 "/>
<Stop estilo offset = "100%" = "stop-color: rgb (0,0,255); dejar de opacidad: 1" />
</ RadialGradient>
</ Def>
<Elipse cx = "200" cy = "70" rx = "85" ry = "55" llenar = "url (# grad1)" />
</ Svg>
<Def>
<RadialGradient id = cx = "50%" cy = "50%" r = "50%" fx = fy "grad1" "50%" = "50%">
<Stop compensado = estilo "0%" = "stop-color: rgb (255,255,255);
dejar de opacidad: 0 "/>
<Stop estilo offset = "100%" = "stop-color: rgb (0,0,255); dejar de opacidad: 1" />
</ RadialGradient>
</ Def>
<Elipse cx = "200" cy = "70" rx = "85" ry = "55" llenar = "url (# grad1)" />
</ Svg>
Trate »
Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).
análisis de código:
- atributo id <radialGradient> etiqueta puede ser un nombre único para la definición del degradado
- CX, CY, yr atributo define el círculo más externo y Fx y Fy definir el círculo más interno
- gama de colores del gradiente puede estar compuesto de dos o más colores. Cada color se especifica mediante una etiqueta <STOP>. desplazamiento se utiliza para definir el comienzo y el final del gradiente
- Llenar elemento de propiedad de enlazar con el gradiente de la elipse
Ejemplo 2
Definido degradado radial de blanco a azul ovalado otra:
Aquí está el código SVG:
Ejemplos
<Xmlns = Svg "http://www.w3.org/2000/svg" version = "1.1">
<Def>
<RadialGradient id = cx = "20%" cy = "30%" r = "30%" fx = fy "grad1" "50%" = "50%">
<Stop compensado = estilo "0%" = "stop-color: rgb (255,255,255);
dejar de opacidad: 0 "/>
<Stop estilo offset = "100%" = "stop-color: rgb (0,0,255); dejar de opacidad: 1" />
</ RadialGradient>
</ Def>
<Elipse cx = "200" cy = "70" rx = "85" ry = "55" llenar = "url (# grad1)" />
</ Svg>
<Def>
<RadialGradient id = cx = "20%" cy = "30%" r = "30%" fx = fy "grad1" "50%" = "50%">
<Stop compensado = estilo "0%" = "stop-color: rgb (255,255,255);
dejar de opacidad: 0 "/>
<Stop estilo offset = "100%" = "stop-color: rgb (0,0,255); dejar de opacidad: 1" />
</ RadialGradient>
</ Def>
<Elipse cx = "200" cy = "70" rx = "85" ry = "55" llenar = "url (# grad1)" />
</ Svg>
Trate »
Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).