initial commit

1 files changed, 181 insertions, 0 deletions

diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html
new file mode 100644
index 0000000000..bdb5e39461
--- /dev/null
+++ b/files/ru/web/svg/tutorial/gradients/index.html
@@ -0,0 +1,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>&lt;defs&gt; </code>SVG файла.</p>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<pre class="brush: html notranslate">&lt;svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;linearGradient id="Gradient1"&gt;
+        &lt;stop class="stop1" offset="0%"/&gt;
+        &lt;stop class="stop2" offset="50%"/&gt;
+        &lt;stop class="stop3" offset="100%"/&gt;
+      &lt;/linearGradient&gt;
+      &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="50%" stop-color="black" stop-opacity="0"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/linearGradient&gt;
+      &lt;style type="text/css"&gt;&lt;![CDATA[
+        #rect1 { fill: url(#Gradient1); }
+        .stop1 { stop-color: red; }
+        .stop2 { stop-color: black; stop-opacity: 0; }
+        .stop3 { stop-color: blue; }
+      ]]&gt;&lt;/style&gt;
+  &lt;/defs&gt;
+
+  &lt;rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/&gt;
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p>
+
+<p>Выше находится пример линейного градиента, который применен к элементу <code>&lt;rect&gt;. </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"> &lt;stop offset="100%" stop-color="yellow" stop-opacity="0.5"/&gt;
+</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>&lt;linearGradient&gt;</code> также принимает некоторые другие атрибуты, который определяют размер и внешний вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами <code>x1, x2, y1, y2</code>. Эти атрибуты определяют линию, вдоль которой двигается градиент. По умолчанию градиент имеет горизонтальную ориентацию, но это может быть изменено с помощью этих атрибутов. Gradient2 в примере выше предназначен для создания вертикального градиента.</p>
+
+<pre class="eval notranslate"> &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+</pre>
+
+<div class="note">
+<p><strong>Замечание: </strong>Вы также можете использовать атрибут <code>xlink:href </code>для градиентов. Когда он использован, атрибуты и стопы из одного градиента могут быть включены в другой. В примере выше можно было бы не пересоздавать все точки остановки в Gradient2<strong>.</strong></p>
+
+<pre class="eval notranslate"> &lt;linearGradient id="Gradient1"&gt;
+   &lt;stop id="stop1" offset="0%"/&gt;
+   &lt;stop id="stop2" offset="50%"/&gt;
+   &lt;stop id="stop3" offset="100%"/&gt;
+ &lt;/linearGradient&gt;
+ &lt;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"/&gt;
+</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">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="RadialGradient1"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+      &lt;radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/&gt;
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_example_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p>
+
+<p>Аттрибуты <strong>stop</strong>, используемые здесь - отвечают за то же, что и в линейных градиентах. Однако сейчас объект будет красным в центре и постепенно меняться к синему цвету, "двигаясь" к краям. Как и линейный градиент, элемент <code>&lt;radialGradient&gt;</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">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="120" height="120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100"
+        fill="url(#Gradient)" stroke="black" stroke-width="2"/&gt;
+
+  &lt;circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/&gt;
+  &lt;circle cx="35" cy="35" r="2" fill="white" stroke="white"/&gt;
+  &lt;circle cx="60" cy="60" r="2" fill="white" stroke="white"/&gt;
+  &lt;text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt"&gt;(fx,fy)&lt;/text&gt;
+  &lt;text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt"&gt;(cx,cy)&lt;/text&gt;
+
+&lt;/svg&gt;</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">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="GradientPad"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="pad"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+      &lt;radialGradient id="GradientRepeat"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="repeat"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+      &lt;radialGradient id="GradientReflect"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="reflect"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/&gt;
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/&gt;
+  &lt;rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/&gt;
+
+  &lt;text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt"&gt;Pad&lt;/text&gt;
+  &lt;text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt"&gt;Repeat&lt;/text&gt;
+  &lt;text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt"&gt;Reflect&lt;/text&gt;
+
+&lt;/svg&gt;</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"> &lt;radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"&gt;
+</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>