Градиенты SVG

SVG градиент может быть определен как平滑ый переход от одного цвета к другому. В SVG есть два типа градиентов,分别是: линейный градиент и радиальный градиент.

SVG градиент - это метод заполнения формы цветом неuniformно. Таким образом, заполнение или контур формы могут изменяться от одного цвета к другому. Это действительно выглядит хорошо для некоторых типов графиков.

Пример градиента

Вот как выглядит приложение градиента к заливке и контуру формы:

Первый прямоугольник всегда имеет одинаковый цвет контура, но заливка имеет градиент от светло-зеленого к темно-зеленому.
　 　Второй прямоугольник применяет градиент как к контуру, так и к заливке.
　 　Третий прямоугольник имеет градиент, примененный к контуру, но без заливки.
　 　Четвертый прямоугольник применил градиент к заливке, но без контура.

Есть два типа градиентов:

1. линейный градиент

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

Следующие разделы расскажут о этих аспектах.

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

Линейный градиент изменяется от одного цвета к другому линейно и равномерно. В начале статьи вы уже видели несколько примеров простых линейных градиентов.

Цвет может меняться вертикально, горизонтально или по векторам, которые вы определяете. Вы также можете заливать только часть формы градиентом, а не всю форму. Перед тем как продолжить, вот несколько визуальных примеров:

Первый прямоугольник использует вертикальный градиент. Второй прямоугольник использует горизонтальный градиент. Третий прямоугольник использует градиент по диагонали (темнеет в нижнем правом углу). Четвертый прямоугольник заливается градиентом только правой половины. Все это возможно с помощью линейного градиента SVG.

линейный градиент используется<linearGradient>элементы определяются. Вот пример:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%" y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%" y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　<stop offset="0%" stop-color="#00cc00" stop-opacity="1"/>
　　　　　　<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect　x="10"　y="10"　width="75"　height="100"　rx="10"　ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke:　#005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

Как вы видите,<linearGradient>-element вложен в<defs>-element, поэтому градиент всегда должен быть вложен в<defs>-element, поэтому их можно будет ссылаться на них в SVG-изображениях. В этом примере линейный градиент определен свойством CSS (fill:url(#myLinearGradient1)). <rect>егоstyleссылки на -element в свойствах.

Этот<linearGradient>-elements имеют два вложенных<stop>-elements.<linearGradient>-elements контролируют, что происходит до и после применения градиента (направление иspreadMethodсвойства). Этот<stop>-elements контролируют цвета, используемые в градиенте, расстояние до цвета формы, а также прозрачность градиента.

Это<linearGradient>-список свойств элемента:

Это<stop>Список свойств элемента:

Запомнить все эти описания свойств не легко. Это создало изображение для пояснения значений этих свойств:

Это определение линейного градиента, соответствующего изображению:

　　　　<svg xmlns="http://www.w3.org/2000/svg"
　　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　<linearGradient id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　　　x1="0%" y1="0%"
　　　　　　　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop　offset="10%"　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　　　<stop　offset="30%"　stop-color="#006600"　stop-opacity="1"/>
　　　　　　　　<stop　offset="70%"　stop-color="#cc0000"　stop-opacity="1"/>
　　　　　　　　<stop　offset="90%"　stop-color="#000099"　stop-opacity="1"/>
　　　　　　</linearGradient>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="500"　height="50"　rx="10"　ry="10"
　　　　　　　style="fill:url(#myLinearGradient1);　stroke:　#005000;
　　　　　　　　　　　　　　stroke-width:　3;"　/>
　　　　</svg>

Первый цвет остановки #00cc00, начинается с 10% входа в прямоугольник. Из-заspreadMethodУстановлен как «подушка», первый цвет также заливается в прямоугольникДо этогоЦвет первого пункта остановки (0-10%).

От 10% цвета первого цвета остановки до второго цвета остановки #006600, достигая 30% прямоугольника.

От 30% второго终止ного цвета до третьего终止ного цвета #cc0000 (красный), достигая 70% прямоугольника.

От 70% третьего цвета остановки до четвертого и последнего цвета остановки #000099 (синий), достигая 90%. От 90% до оставшейся части прямоугольника, последний终止ный цвет (#000099) заливается в прямоугольник, потому чтоspreadMethod 　 　}<linearGradient>свойства элементов установлены в "pad".

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

радиальный градиент, в котором цвета изменяются圆形, а не линейно. Вот пример изображения:

Как вы видите, цвета теперь изменяются в виде круга. Последние три (зеленые) прямоугольника изменяются только в центре наименее насыщенного зеленого. Первый зеленый прямоугольник имеет цвета, рассеянные от центра прямоугольника. Второй прямоугольник использует центр верха прямоугольника. Третий прямоугольник центрируется в левом верхнем углу.

радиальный градиент использует<radialGradient>элементы определяются. Вот пример:

<svg width="512" height="120">
<defs>
<radialgradient id="myRadialGradient4" fx="5%" fy="5%" r="65%" spreadmethod="pad"><stop offset="0%" stop-color="#00ee00" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#006600" stop-opacity="1"></stop></radialgradient></defs>
<rect x="340" y="10" width="100" height="100" rx="10" ry="10" style="fill:url(#myRadialGradient4); stroke: #005000; stroke-width: 3;"></rect>
　　　</svg>

SVG-код фактически определяет четвертый прямоугольник, показанный в примере. Обратите внимание на то, как<stop>как и линейный градиент, используется элемент для определения цвета (для пояснений см. линейный градиент).

Это<radialGradient> 　 　список свойств элементов:

Центр радиального градиента является центром цветового расширения. Если представить радиальный градиент как круг, то cx и cy обозначают центр этого круга.

Фокус радиального градиента является "углом" цветового излучения. Если представить радиальный градиент как лампочку, фокус будет определять угол, под которым свет от лампочки встречается с формой. 50%, 50% означает прямо сверху. 5%, 5% означает с верхнего левого угла вниз. Градиент выглядит как если бы источник света освещал вашу форму.

Прежде чем правильно настроить градиент, вы, вероятно, должны сначала попробовать центр и фокус градиента. Я знаю, что я делаю это, чтобы создать эти простые примеры.

преобразования градиента

Вы можете использовать стандартныеSVG преобразованийфункции для преобразования градиента. Таким образом, использованиеgradientTransformпараметры, независимо от<linearGradient>и 　 　 <radialGradient>。Это пример:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%" y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%" y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad" gradientTransform="rotate(45)"
　　　　>
　　　　　　<stop offset="0%" stop-color="#00cc00" stop-opacity="1"/>
　　　　　　<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect　x="10"　y="10"　width="75"　height="100"　rx="10"　ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke:　#005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

Этот пример определяет градиент сgradientTransform() 　Линейный градиент свойств, градиент который вращается на 45 градусов. Обычно, градиент分级 цвета сверху вниз, но теперь, благодаря вращению, он идет от верхнего правого угла к нижнему левому.

Эффект изображения после выполнения: