Радиальная градиентная заливка SVG

SVG градиенты должны определяться в теге <defs>.

Радиальный градиент

Тег <radialGradient> используется для определения радиального градиента.

Тег <radialGradient> должен быть вложен в тег <defs>. Тег <defs> является аббревиатурой от definitions и позволяет определять специальные элементы, такие как градиенты.

Скопируйте следующий код в блокнот и сохраните файл как "radial1.svg". Поместите этот файл в вашу веб-директорию:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

Интерпретация кода:

Атрибут id тега <radialGradient> может определить уникальное имя градиента, атрибут fill:url(#grey_blue) связывает элемент ellipse с этим градиентом, атрибуты cx, cy и r определяют внешнюю окружность, а fx и fy определяют внутреннюю окружность Цветовой диапазон градиента может состоять из двух или более цветов. Каждому цвету соответствует тег <stop>. Атрибут offset используется для определения начала и конца градиента.

Просмотр примера

Пример:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

Просмотр примера