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 <lex61rus@gmail.com>

1 files 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: <linearGradient>
 slug: Web/SVG/Element/linearGradient
 tags:
-  - NeedsUpdate
   - SVG
   - SVG градиент
-  - Справка
   - Элемент
 translation_of: Web/SVG/Element/linearGradient
 original_slug: Web/SVG/Элемент/linearGradient
 ---
 <div>{{SVGRef}}</div>
 
-<p>Элемент <strong><code>&lt;linearGradient&gt;</code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет авторам определять линейные градиенты для заполнения или изменения графических элементов.</p>
+<p><strong><code>&lt;linearGradient&gt;</code></strong> позволяет определять линейные градиенты для заполнения или изменения графических элементов.</p>
 
-<h2 id="Контекст_использования">Контекст использования</h2>
-
-<p>{{svginfo}}</p>
-
-<h2 id="Атрибуты">Атрибуты</h2>
-
-<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
-
-<ul>
- <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a></li>
- <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты презентации</a></li>
- <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink_attributes">Атрибуты Xlink</a></li>
- <li>{{SVGAttr("class")}}</li>
- <li>{{SVGAttr("style")}}</li>
- <li>{{SVGAttr("externalResourcesRequired")}}</li>
-</ul>
-
-<h3 id="Специфические_атрибуты">Специфические атрибуты</h3>
+<div class="notecard note">
+<p>Не путайте с CSS {{cssxref('linear-gradient()')}}, CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.</p>
+</div>
 
-<ul>
- <li>{{SVGAttr("gradientUnits")}}</li>
- <li>{{SVGAttr("gradientTransform")}}</li>
- <li>{{SVGAttr("x1")}}</li>
- <li>{{SVGAttr("y1")}}</li>
- <li>{{SVGAttr("x2")}}</li>
- <li>{{SVGAttr("y2")}}</li>
- <li>{{SVGAttr("spreadMethod")}}</li>
- <li>{{SVGAttr("xlink:href")}}</li>
-</ul>
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
 
-<h2 id="DOM_интерфейс">DOM интерфейс</h2>
+<pre class="brush: html">&lt;svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="myGradient" gradientTransform="rotate(90)"&gt;
+      &lt;stop offset="5%"  stop-color="gold" /&gt;
+      &lt;stop offset="95%" stop-color="red" /&gt;
+    &lt;/linearGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;!-- using my linear gradient --&gt;
+  &lt;circle cx="5" cy="5" r="4" fill="url('#myGradient')" /&gt;
+&lt;/svg&gt;</pre>
 
-<p>Этот элемент реализует {{domxref("SVGLinearGradientElement")}} интерфейс.</p>
+<p>{{EmbedLiveSample('Example', 150, '100%')}}</p>
+</div>
 
-<h2 id="Пример">Пример</h2>
+<h2 id="Attributes">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-gradientUnits">{{SVGAttr("gradientUnits")}}</dt>
+ <dd>Определяет систему координат для атрибутов <code>x1</code>, <code>x2</code>, <code>y1</code>, <code>y2</code><br>
+ <small><em>Тип значения</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Значение по умолчанию</em>: <code>objectBoundingBox</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+ <dt id="attr-gradientTransform">{{SVGAttr("gradientTransform")}}</dt>
+ <dd>Этот атрибут обеспечивает дополнительное <a href="/ru/docs/Web/SVG/Attribute/transform">преобразование</a> для системы координат градиента.<br>
+ <small><em>Тип значения</em>: <strong><a href="/en-US/docs/Web/SVG/Content_type#transform-list">&lt;transform-list&gt;</a></strong> ; <em>Значение по умолчанию</em>: <em>identity transform</em>; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("href")}}</dt>
+ <dd>Этот атрибут определяет ссылку на другой элемент <code>&lt;linearGradient&gt;</code>, который будет использоваться в качестве шаблона.<br>
+ <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#url"><strong>&lt;URL&gt;</strong></a> ; <em>Значение по умолчанию</em>: none; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("spreadMethod")}}</dt>
+ <dd>Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент.<br>
+ <small><em>Тип значения</em>: <code>pad</code>|<code>reflect</code>|<code>repeat</code> ; <em>Значение по умолчанию</em>: <code>pad</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("x1")}}</dt>
+ <dd>Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент.<br>
+ <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#length"><strong>&lt;length&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0%</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("x2")}}</dt>
+ <dd>Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент. <br>
+ <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#length"><strong>&lt;length&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>100%</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+ <dt id="attr-cx">{{SVGAttr("xlink:href")}}</dt>
+ <dd>{{Deprecated_Header}}<a href="/en-US/docs/Web/SVG/Content_type#iri">&lt;IRI&gt;</a> ссылка на другой <code>&lt;linearGradient&gt;</code> элемент, который будет использоваться в качестве шаблона.<br>
+ <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#iri"><strong>&lt;IRI&gt;</strong></a> ; <em>Значение по умолчанию</em>: none; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("y1")}}</dt>
+ <dd>Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент.<br>
+ <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#length"><strong>&lt;length&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0%</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("y2")}}</dt>
+ <dd>Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент.<br>
+ <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#length"><strong>&lt;length&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0%</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+</dl>
+
+<h3 id="Global_attributes">Глобальные атрибуты</h3>
+
+<dl>
+ <dt><a href="/ru/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt>
+ <dd><small>Прежде всего: {{SVGAttr('id')}}</small></dd>
+ <dt><a href="/en-US/docs/Web/SVG/Attribute/Styling">Атрибуты стилизации</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt>Атрибуты событий</dt>
+ <dd><small><a href="/en-US/docs/Web/SVG/Attribute/Events#global_event_attributes">Глобальные атрибуты событий</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#document_element_event_attributes">Атрибуты событий элементов документа</a></small></dd>
+ <dt><a href="/en-US/docs/Web/SVG/Attribute/Presentation">Атрибуты презентации</a></dt>
+ <dd><small>Прежде всего: {{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')}}</small></dd>
+ <dt>XLink атрибуты</dt>
+ <dd><small>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}</small></dd>
+</dl>
+
+<h2 id="Usage_notes">Примечания по использованию</h2>
 
-<pre class="brush: html">&lt;svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"&gt;
-    &lt;defs&gt;
-        &lt;linearGradient id="MyGradient"&gt;
-            &lt;stop offset="5%"  stop-color="green"/&gt;
-            &lt;stop offset="95%" stop-color="gold"/&gt;
-        &lt;/linearGradient&gt;
-    &lt;/defs&gt;
+<p>{{svginfo}}</p>
 
-    &lt;rect fill="url(#MyGradient)"
-          x="10" y="10" width="100" height="100"/&gt;
-&lt;/svg&gt;</pre>
+<h2 id="Specifications">Спецификации</h2>
 
-<p>{{EmbedLiveSample("Example", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}</p>
-
-<h2 id="Характеристики">Характеристики</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Спецификация</th>
-   <th scope="col">Статус</th>
-   <th scope="col">Комментарий</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('SVG2', 'pservers.html#LinearGradientElement', '&lt;linearGradient&gt;')}}</td>
-   <td>{{Spec2('SVG2')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '&lt;linearGradient&gt;')}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td>Начальное определение</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
-
-<div id="compat-desktop">
-<p>{{Compat("svg.elements.linearGradient")}}</p>
-</div>
+{{Specifications}}
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+<h2 id="Browser_compatibility">Совместимость с браузерами</h2>
 
-<ul>
- <li>{{SVGElement("radialGradient")}}</li>
- <li>{{SVGElement("stop")}}</li>
-</ul>
+<p>{{Compat}}</p>