From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- files/ru/web/svg/tutorial/gradients/index.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'files/ru/web/svg/tutorial/gradients') diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html index d125016c73..76d965fc45 100644 --- a/files/ru/web/svg/tutorial/gradients/index.html +++ b/files/ru/web/svg/tutorial/gradients/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Tutorial/Gradients

Basic example

-
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
       <linearGradient id="Gradient1">
         <stop class="stop1" offset="0%"/>
@@ -44,20 +44,20 @@ translation_of: Web/SVG/Tutorial/Gradients
 
 
Выше находится пример линейного градиента, который применён к элементу <rect>. Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определённых атрибутом offset для позиции и атрибутом stop-color. Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, Gradient1 начинается с красного цвета, изменяется до прозрачно-чёрного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут stop-opacity, чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).

 
-
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
+
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
 

 
 
Чтобы использовать градиент, мы должны сослаться на него из атрибутов объекта fill/stroke. Это делается таким же образом, как вы ссылаетесь на элементы в CSS, используя url. В этом случае, url - это просто ссылка на наш градиент, которому задан уникальный ID, "Gradient". Чтобы добавить его, установим fill="url(#Gradient)". Наш объект теперь многоцветный. То же самое можно сделать с атрибутом stroke.

 
 
Элемент <linearGradient> также принимает некоторые другие атрибуты, который определяют размер и внешний вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами x1, x2, y1, y2. Эти атрибуты определяют линию, вдоль которой двигается градиент. По умолчанию градиент имеет горизонтальную ориентацию, но это может быть изменено с помощью этих атрибутов. Gradient2 в примере выше предназначен для создания вертикального градиента.

 
-
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
 

 
 

 
Замечание: Вы также можете использовать атрибут xlink:href для градиентов. Когда он использован, атрибуты и стопы из одного градиента могут быть включены в другой. В примере выше можно было бы не пересоздавать все точки остановки в Gradient2.

 
-
 <linearGradient id="Gradient1">
+
 <linearGradient id="Gradient1">
    <stop id="stop1" offset="0%"/>
    <stop id="stop2" offset="50%"/>
    <stop id="stop3" offset="100%"/>
@@ -75,7 +75,7 @@ translation_of: Web/SVG/Tutorial/Gradients
 
 
Basic example

 
-
<?xml version="1.0" standalone="no"?>
+
<?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">
@@ -101,7 +101,7 @@ translation_of: Web/SVG/Tutorial/Gradients
 
 
Center and focal point

 
-
<?xml version="1.0" standalone="no"?>
+
<?xml version="1.0" standalone="no"?>
 
 <svg width="120" height="120" version="1.1"
   xmlns="http://www.w3.org/2000/svg">
@@ -132,7 +132,7 @@ translation_of: Web/SVG/Tutorial/Gradients
 
 
spreadMethod

 
-
<?xml version="1.0" standalone="no"?>
+
<?xml version="1.0" standalone="no"?>
 
 <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
@@ -170,7 +170,7 @@ translation_of: Web/SVG/Tutorial/Gradients
 
 
У обоих типов градиентов также есть атрибут gradientUnits, который описывает систему измерений, которую вы собираетесь использовать, когда описываете размеры или ориентацию или градиент. Данный атрибут принимает 2 возможных значения: userSpaceOnUse или objectBoundingBox (дефолтное, показывалось во всех примерах выше). objectBoundingBox автоматически адаптирует градиент к размеру объекта, так что вы можете указать координаты в виде значений от 0 до 1, и браузер автоматически их отпозиционирует. userSpaceOnUse позиционирует градиент в абсолютных единицах измерения, так что вам необходимо знать где находится целевой объект, чтобы правильно применить к нему градиент. radialGradient  выше может быть переписан:

 
-
 <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
+
 <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
 

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

-- 
cgit v1.2.3-54-g00ecf