SVG Градиент - Радиоактивный
SVG радиоактивный постепенное - <RadialGradient>
Элемент <RadialGradient> используется для определения радиального градиента.
<RadialGradient> Тег должен быть вложен в интерьере <DEFS>. Тег <Defs> являются определения акроним, такие как специальные элементы, которые могут быть определены как градиент.
Пример 1
Определить радиальный градиент от белого до синего овала:
Вот SVG код:
примеров
<= XMLNS SVG "http://www.w3.org/2000/svg" версия = "1.1">
<Defs>
<RadialGradient ID = "grad1" сх = "50%" су = "50%" г = "50%" FX = "50%" FY = "50%">
<Стоп смещение = стиль "0%" = "стоп-цвет: RGB (255,255,255);
стоп-непрозрачность: 0 "/>
<Стоп смещение = стиль "100%" = "стоп-цвет: RGB (0,0,255); стоп-непрозрачности: 1" />
</ RadialGradient>
</ Defs>
<Ellipse сх = "200" су = "70" гх = "85" Ry = "55" заполнить = "URL (# grad1)" />
</ SVG>
<Defs>
<RadialGradient ID = "grad1" сх = "50%" су = "50%" г = "50%" FX = "50%" FY = "50%">
<Стоп смещение = стиль "0%" = "стоп-цвет: RGB (255,255,255);
стоп-непрозрачность: 0 "/>
<Стоп смещение = стиль "100%" = "стоп-цвет: RGB (0,0,255); стоп-непрозрачности: 1" />
</ RadialGradient>
</ Defs>
<Ellipse сх = "200" су = "70" гх = "85" Ry = "55" заполнить = "URL (# grad1)" />
</ SVG>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
Анализ кода:
- тег атрибут ID <RadialGradient> может быть уникальное имя для определения градиента
- CX, CY, и атрибут г определяет самую внешнюю окружность и Fx и Fy определяют узкий круг
- Градиент цветовая гамма может состоять из двух или более цветов. Каждый цвет задается с помощью <Стоп> тег. Смещение используется для определения начала и конца градиента
- Заполните элемент свойства, чтобы связать с градиентом эллипса
Пример 2
Определено радиальный градиент от белого до синего овала другой:
Вот SVG код:
примеров
<= XMLNS SVG "http://www.w3.org/2000/svg" версия = "1.1">
<Defs>
<RadialGradient ID = "grad1" сх = "20%" су = "30%" г = "30%" FX = "50%" FY = "50%">
<Стоп смещение = стиль "0%" = "стоп-цвет: RGB (255,255,255);
стоп-непрозрачность: 0 "/>
<Стоп смещение = стиль "100%" = "стоп-цвет: RGB (0,0,255); стоп-непрозрачности: 1" />
</ RadialGradient>
</ Defs>
<Ellipse сх = "200" су = "70" гх = "85" Ry = "55" заполнить = "URL (# grad1)" />
</ SVG>
<Defs>
<RadialGradient ID = "grad1" сх = "20%" су = "30%" г = "30%" FX = "50%" FY = "50%">
<Стоп смещение = стиль "0%" = "стоп-цвет: RGB (255,255,255);
стоп-непрозрачность: 0 "/>
<Стоп смещение = стиль "100%" = "стоп-цвет: RGB (0,0,255); стоп-непрозрачности: 1" />
</ RadialGradient>
</ Defs>
<Ellipse сх = "200" су = "70" гх = "85" Ry = "55" заполнить = "URL (# grad1)" />
</ SVG>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).