1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
---
title: Градиенты
slug: Web/SVG/Tutorial/Gradients
translation_of: Web/SVG/Tutorial/Gradients
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p>
<p>Возможность создания и использования градиентов, также как заливки и обводки, более интересна, чем просто заливка или обводка.</p>
<p>Есть два типа градиентов: линейный и радиальный. Вы должны присвоить градиенту атрибут <code><strong>id</strong>, </code>в противном случае на него не смогут ссылаться другие элементы внутри файла. Градиенты определяются в секции <code>defs, </code>а не в самой фигуре. Это позволяет их использовать многократно.</p>
<h2 id="SVGLinearGradient" name="SVGLinearGradient">Линейный градиент (Linear Gradient)</h2>
<p>Линейные градиенты изменяются вдоль прямой линии. Чтобы вставить градиент, нужно создать ноду {{SVGElement('linearGradient')}} внутри секции <code><defs> </code>SVG файла.</p>
<h3 id="Basic_example">Basic example</h3>
<pre class="brush: html notranslate"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<style type="text/css"><![CDATA[
#rect1 { fill: url(#Gradient1); }
.stop1 { stop-color: red; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: blue; }
]]></style>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg></pre>
<p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p>
<p>Выше находится пример линейного градиента, который применен к элементу <code><rect>. </code>Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определенных атрибутом <code>offset </code>для позиции и атрибутом <code>stop-color. </code>Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, <em>Gradient1</em> начинается с красного цвета, изменяется до прозрачно-черного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут <code>stop-opacity, </code>чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).</p>
<pre class="eval notranslate"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
</pre>
<p>Чтобы использовать градиент, мы должны сослаться на него из атрибутов объекта <code>fill/stroke</code>. Это делается таким же образом, как вы ссылаетесь на элементы в CSS, используя <code>url</code>. В этом случае, url - это просто ссылка на наш градиент, которому задан уникальный ID, "<em>Gradient". </em>Чтобы добавить его, установим <code>fill="url(#Gradient)"</code>. Наш объект теперь многоцветный. То же самое можно сделать с атрибутом <code>stroke</code>.</p>
<p>Элемент <code><linearGradient></code> также принимает некоторые другие атрибуты, который определяют размер и внешний вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами <code>x1, x2, y1, y2</code>. Эти атрибуты определяют линию, вдоль которой двигается градиент. По умолчанию градиент имеет горизонтальную ориентацию, но это может быть изменено с помощью этих атрибутов. Gradient2 в примере выше предназначен для создания вертикального градиента.</p>
<pre class="eval notranslate"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
</pre>
<div class="note">
<p><strong>Замечание: </strong>Вы также можете использовать атрибут <code>xlink:href </code>для градиентов. Когда он использован, атрибуты и стопы из одного градиента могут быть включены в другой. В примере выше можно было бы не пересоздавать все точки остановки в Gradient2<strong>.</strong></p>
<pre class="eval notranslate"> <linearGradient id="Gradient1">
<stop id="stop1" offset="0%"/>
<stop id="stop2" offset="50%"/>
<stop id="stop3" offset="100%"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/>
</pre>
<p>Я включил пространство имён xlink прямо в ноду, хотя обычно вы хотели бы определить его в верхней части вашего документа. Подробнее об этом мы <a href="https://developer.mozilla.org/en-US/Web/SVG/Tutorial/Other_content_in_SVG">поговорим в разделе изображений</a>.</p>
</div>
<h2 id="Radial_Gradient" name="Radial_Gradient">Радиальные градиенты</h2>
<p>Радиальные градиенты похожи на линейные, но рисуют градиент, который "излучается" из точки. Для создания градиента Вам необходимо добавить элемент {{SVGElement('radialGradient')}} в секцию <strong>defs</strong>.</p>
<h3 id="Basic_example_2">Basic example</h3>
<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?>
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="RadialGradient1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
</svg></pre>
<p>{{ EmbedLiveSample('Basic_example_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p>
<p>Аттрибуты <strong>stop</strong>, используемые здесь - отвечают за то же, что и в линейных градиентах. Однако сейчас объект будет красным в центре и постепенно меняться к синему цвету, "двигаясь" к краям. Как и линейный градиент, элемент <code><radialGradient></code> может иметь несколько аттрибутов, описывающих его позицию и ориентацию (направленность?). Однако, в отличие от линейных градиентов, радиальные немного сложнее. Радиальные градиенты задаются двумя "точками", которые определят где будут границы. Первая "точка" определяет окружность, где градиент заканчивается. Для этого нам потребуется центр круга, который обозначается как <strong>cx</strong> и <strong>cy</strong>, и радиус - <strong>r</strong>. Изменяя эти аттрибуты, вы можете "двигать" внешнюю границу градиента и менять ее размер, как показано во втором прямоугольнике выше.</p>
<p>Вторая "точка" называется <strong>фокальной</strong> и задается аттрибутами <strong>fx</strong> и <strong>fy</strong>. В то время как первые "точки" указывают на внешнюю границу градиента, фокальная "точка" определяет где должна быть его <strong>середина</strong>. Это легко увидеть на примере.</p>
<h3 id="Center_and_focal_point">Center and focal point</h3>
<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?>
<svg width="120" height="120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient"
cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100"
fill="url(#Gradient)" stroke="black" stroke-width="2"/>
<circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
<circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg></pre>
<p>{{ EmbedLiveSample('Center_and_focal_point','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}</p>
<p>Если фокальная точка передвинута за границы круга, то градиент будет отрисован некорректно. Поэтому фокальная точка обязательно должна быть внутри границы круга (или на самой границе). Если фокальная точка не указана, то по дефолту она совпадает с центром круга.</p>
<p>Линейный и радиальный градиенты также принимают несколько аттрибутов, описывающих как они могут изменяться. Единственный аттрибут, о котором я хотел бы рассказать более подробно - это <strong><code>spreadMethod</code></strong><code>. Этот аттрибут указывает, что должно происходить, когда градиент "достигает" внешней границы градиента, но объект еще не заполнен. Аттрибут может принимать одно и трех значений:</code>"pad", "reflect", или"repeat". "<strong>Pad</strong>" - это то что вы пока что видели: когда градиент достигает "краев", финальный цвет используется для заполнения оставшейся области. "Reflect" - градиент продолжает "двигаться" в "зеркальном" отражении (стартовый цвет берется из 100%, а конечный из 0%). А затем снова "переворачивается". И так до тех пор пока не достигнет края.</p>
<h3 id="spreadMethod">spreadMethod</h3>
<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?>
<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="GradientPad"
cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
spreadMethod="pad">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<radialGradient id="GradientRepeat"
cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
spreadMethod="repeat">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<radialGradient id="GradientReflect"
cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
spreadMethod="reflect">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
<rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
<text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
<text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
<text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
</svg></pre>
<p>{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}</p>
<p>У обоих типов градиентов также есть атрибут <code><strong>gradientUnits</strong></code>, который описывает систему измерений, которую Вы собираетесь использовать, когда описываете размеры или ориентацию или градиен. Данный атрибут принимает 2 возможных значения: <strong><code>userSpaceOnUse</code></strong><code> </code>или <strong><code>objectBoundingBox </code></strong>(дефолтное, показывалось во всех примерах выше). <strong><code>objectBoundingBox </code></strong>автоматически адаптирует градиент к размеру объекта, так что Вы можете указать координаты в виде значений от 0 до 1, и браузер автоматически их отпозиционирует. <strong><code>userSpaceOnUse </code></strong>позиционирует градиент в абсолютных единицах измерения, так что Вам необходимо знать где находится целевой объект, чтобы правильно применить к нему градиент. radialGradient выше может быть переписан:</p>
<pre class="eval notranslate"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
</pre>
<p>Вы также можете применить иную трансформацию к градиенту, используя аттрибут <strong><code>gradientTransform</code></strong>, но мы пока что <a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">его не изучали</a>, я осталю это на потом.<br>
<br>
Существуют и другие предостережения для работы с <br>
<code>gradientUnits="objectBoundingBox"</code>, когда поле ограничения объекта не является квадратным, но они довольно сложны и им придется ждать, пока кто-то другой не соизволит объяснить их.</p>
<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p>
|
