From de7286e9daf3ac1519c2da456f8ef1d59f8bad9d Mon Sep 17 00:00:00 2001 From: Maxim Postautov <54762420+mpstv@users.noreply.github.com> Date: Wed, 8 Sep 2021 20:59:41 +0300 Subject: RU: Fix broken sample in SVG linearGradien page (#2390) * Fix broken sample in SVG linearGradien page fix #2344 * update translation svg linearGradient page * Update index.html Co-authored-by: Alexey Pyltsyn --- files/ru/web/svg/element/lineargradient/index.html | 155 ++++++++++----------- 1 file changed, 75 insertions(+), 80 deletions(-) diff --git a/files/ru/web/svg/element/lineargradient/index.html b/files/ru/web/svg/element/lineargradient/index.html index 88934c35a4..5034823e8a 100644 --- a/files/ru/web/svg/element/lineargradient/index.html +++ b/files/ru/web/svg/element/lineargradient/index.html @@ -2,101 +2,96 @@ title: slug: Web/SVG/Element/linearGradient tags: - - NeedsUpdate - SVG - SVG градиент - - Справка - Элемент translation_of: Web/SVG/Element/linearGradient original_slug: Web/SVG/Элемент/linearGradient ---
{{SVGRef}}
-

Элемент <linearGradient> SVG позволяет авторам определять линейные градиенты для заполнения или изменения графических элементов.

+

<linearGradient> позволяет определять линейные градиенты для заполнения или изменения графических элементов.

-

Контекст использования

- -

{{svginfo}}

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Специфические атрибуты

+
+

Не путайте с CSS {{cssxref('linear-gradient()')}}, CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.

+
- +
+ -

DOM интерфейс

+
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="myGradient" gradientTransform="rotate(90)">
+      <stop offset="5%"  stop-color="gold" />
+      <stop offset="95%" stop-color="red" />
+    </linearGradient>
+  </defs>
+
+  <!-- using my linear gradient -->
+  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
+</svg>
-

Этот элемент реализует {{domxref("SVGLinearGradientElement")}} интерфейс.

+

{{EmbedLiveSample('Example', 150, '100%')}}

+
-

Пример

+

Атрибуты

+ +
+
{{SVGAttr("gradientUnits")}}
+
Определяет систему координат для атрибутов x1, x2, y1, y2
+ Тип значения: userSpaceOnUse|objectBoundingBox ; Значение по умолчанию: objectBoundingBox; Анимируемый: да
+
{{SVGAttr("gradientTransform")}}
+
Этот атрибут обеспечивает дополнительное преобразование для системы координат градиента.
+ Тип значения: <transform-list> ; Значение по умолчанию: identity transform; Анимируемый: да
+
{{SVGAttr("href")}}
+
Этот атрибут определяет ссылку на другой элемент <linearGradient>, который будет использоваться в качестве шаблона.
+ Тип значения: <URL> ; Значение по умолчанию: none; Анимируемый: да
+
{{SVGAttr("spreadMethod")}}
+
Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент.
+ Тип значения: pad|reflect|repeat ; Значение по умолчанию: pad; Анимируемый: да
+
{{SVGAttr("x1")}}
+
Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент.
+ Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да
+
{{SVGAttr("x2")}}
+
Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент.
+ Тип значения: <length> ; Значение по умолчанию: 100%; Анимируемый: да
+
{{SVGAttr("xlink:href")}}
+
{{Deprecated_Header}}<IRI> ссылка на другой <linearGradient> элемент, который будет использоваться в качестве шаблона.
+ Тип значения: <IRI> ; Значение по умолчанию: none; Анимируемый: да
+
{{SVGAttr("y1")}}
+
Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент.
+ Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да
+
{{SVGAttr("y2")}}
+
Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент.
+ Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да
+
+ +

Глобальные атрибуты

+ +
+
Основные атрибуты
+
Прежде всего: {{SVGAttr('id')}}
+
Атрибуты стилизации
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Атрибуты событий
+
Глобальные атрибуты событий, Атрибуты событий элементов документа
+
Атрибуты презентации
+
Прежде всего: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
XLink атрибуты
+
{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}
+
+ +

Примечания по использованию

-
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <linearGradient id="MyGradient">
-            <stop offset="5%"  stop-color="green"/>
-            <stop offset="95%" stop-color="gold"/>
-        </linearGradient>
-    </defs>
+
{{svginfo}}

 
-    <rect fill="url(#MyGradient)"
-          x="10" y="10" width="100" height="100"/>
-</svg>
+

Спецификации

-

{{EmbedLiveSample("Example", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}

- -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}}{{Spec2('SVG1.1')}}Начальное определение
- -

Совместимость с браузером

- -
-

{{Compat("svg.elements.linearGradient")}}

-
+{{Specifications}} -

Смотрите также

+

Совместимость с браузерами

- +

{{Compat}}

-- cgit v1.2.3-54-g00ecf