diff options
Diffstat (limited to 'files/ru/web/svg')
46 files changed, 129 insertions, 129 deletions
diff --git a/files/ru/web/svg/applying_svg_effects_to_html_content/index.html b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html index 337add0202..7dc0f367c1 100644 --- a/files/ru/web/svg/applying_svg_effects_to_html_content/index.html +++ b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html @@ -16,7 +16,7 @@ translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content <pre class="brush: html"><style>p { mask: url(#my-mask); }</style> </pre> -<p>В приведенном выше примере все параграфы маскируются с помощью <a href="/en-US/docs/Web/SVG/Element/mask">SVG</a> <a href="/en-US/docs/Web/SVG/Element/mask"><code><mask></code></a> с <a href="/en-US/docs/Web/HTML/Global_attributes/id">ID</a> <code>my-mask</code>. </p> +<p>В приведённом выше примере все параграфы маскируются с помощью <a href="/en-US/docs/Web/SVG/Element/mask">SVG</a> <a href="/en-US/docs/Web/SVG/Element/mask"><code><mask></code></a> с <a href="/en-US/docs/Web/HTML/Global_attributes/id">ID</a> <code>my-mask</code>. </p> <h3 id="Пример_маскировка">Пример: маскировка</h3> @@ -45,7 +45,7 @@ p { <p>Обратите внимание, что в CSS маска указана с использованием URL-адреса ID- <code>#mask-1</code>, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента.</p> -<p>Применение SVG-эффекта к (X) HTML выполняется путем назначения <code>target</code> классу, определенному выше элементу, например:</p> +<p>Применение SVG-эффекта к (X) HTML выполняется путём назначения <code>target</code> классу, определённому выше элементу, например:</p> <pre class="brush: html"><p class="target" style="background:lime;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt @@ -59,7 +59,7 @@ p { </p> </pre> -<p>Вышеприведенный пример будет отображаться с помощью маски, применяемой к нему.</p> +<p>Вышеприведённый пример будет отображаться с помощью маски, применяемой к нему.</p> <p>{{EmbedLiveSample('Example_Masking', 650, 200)}}</p> @@ -111,7 +111,7 @@ p { <h3 id="Пример_Фильтрация">Пример: Фильтрация</h3> -<p>Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трем элементам как в нормальном состоянии, так и при <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover">hover</a> мыши.</p> +<p>Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трём элементам как в нормальном состоянии, так и при <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover">hover</a> мыши.</p> <pre class="brush: html"><p class="target" style="background: lime;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt diff --git a/files/ru/web/svg/attribute/attributetype/index.html b/files/ru/web/svg/attribute/attributetype/index.html index 64578f28b0..c4e46ff973 100644 --- a/files/ru/web/svg/attribute/attributetype/index.html +++ b/files/ru/web/svg/attribute/attributetype/index.html @@ -8,7 +8,7 @@ translation_of: Web/SVG/Attribute/attributeType --- <p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> -<p>Этот атрибут задает пространство имен, в котором определяются конечный атрибут и связанные с ним значения.</p> +<p>Этот атрибут задаёт пространство имён, в котором определяются конечный атрибут и связанные с ним значения.</p> <h2 id="Контекст_использования">Контекст использования</h2> @@ -40,9 +40,9 @@ translation_of: Web/SVG/Attribute/attributeType <dd>Указывает на то, что значение параметра {{ SVGAttr("attributeName") }} является именем свойства CSS, определяемого как анимация.</dd> <dt> </dt> <dt>XML</dt> - <dd>Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имен XML по умолчанию для целевого элемента.</dd> + <dd>Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имён XML по умолчанию для целевого элемента.</dd> <dt>auto</dt> - <dd>Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имен XML по умолчанию для элемента.</dd> + <dd>Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имён XML по умолчанию для элемента.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/svg/attribute/core/index.html b/files/ru/web/svg/attribute/core/index.html index 4423aa5468..6abb480a61 100644 --- a/files/ru/web/svg/attribute/core/index.html +++ b/files/ru/web/svg/attribute/core/index.html @@ -26,7 +26,7 @@ translation_of: Web/SVG/Attribute/Core <small><em>Значение</em>: Любое строковое значение ID; <em>Анимируемый</em>: <strong>Нет</strong></small></dd> <dt id="attr-lang">{{SVGAttr('lang')}}</dt> <dd> - <p>Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определенном в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">документе IETF "Tags for Identifying Languages (BCP47)"</a>.</p> + <p>Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определённом в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">документе IETF "Tags for Identifying Languages (BCP47)"</a>.</p> <div class="note"> <p>SVG2 предоставляет новые <code>lang</code> атрибуты. Если атрибуты <code>lang</code> и <code>xml:lang</code> используются вместе, то <code>xml:lang</code> имеет приоритет над <code>lang</code>.</p> @@ -42,7 +42,7 @@ translation_of: Web/SVG/Attribute/Core <small><em>Тип</em>: <a href="/docs/Web/SVG/Content_type#IRI"><IRI></a>; <em>Анимируемый</em>: <strong>Нет</strong></small></dd> <dt id="attr-xml:lang">{{SVGAttr('xml:lang')}}</dt> <dd> - <p>Это универсальный атрибут, разрешенный во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (<code>null</code>) значение атрибута (<code>xml:lang=""</code>) для указания неизвестного языка. Вместо этого, используйте <code>xml:lang="und"</code>.</p> + <p>Это универсальный атрибут, разрешённый во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (<code>null</code>) значение атрибута (<code>xml:lang=""</code>) для указания неизвестного языка. Вместо этого, используйте <code>xml:lang="und"</code>.</p> <div class="note"> <p>SVG2 предоставляет новые <code>lang</code> атрибуты. Если атрибуты <code>lang</code> и <code>xml:lang</code> используются вместе, то <code>xml:lang</code> имеет приоритет над <code>lang</code>.</p> diff --git a/files/ru/web/svg/attribute/d/index.html b/files/ru/web/svg/attribute/d/index.html index 708aa0cbad..2e1807e521 100644 --- a/files/ru/web/svg/attribute/d/index.html +++ b/files/ru/web/svg/attribute/d/index.html @@ -72,7 +72,7 @@ translation_of: Web/SVG/Attribute/d </tbody> </table> -<p class="note"><strong>Сноска:</strong> Точка происхождения (координата <code>0</code>,<code>0</code>) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет свое происхождение в левом нижнем углу своего бокса.</p> +<p class="note"><strong>Сноска:</strong> Точка происхождения (координата <code>0</code>,<code>0</code>) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет своё происхождение в левом нижнем углу своего бокса.</p> <h2 id="missing-glyph">missing-glyph</h2> @@ -122,9 +122,9 @@ translation_of: Web/SVG/Attribute/d <p><em>(MoveTo path commands)</em></p> -<p><em>MoveTo </em>инструкции можно рассматривать как собирание чертежного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.</p> +<p><em>MoveTo </em>инструкции можно рассматривать как собирание чертёжного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.</p> -<p class="note"><strong>Заметка:</strong> Хорошей практикой является открытие всех путей с помощью команды <strong>moveto</strong>, потому что без начального <strong>moveto</strong> команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределенному поведению.</p> +<p class="note"><strong>Заметка:</strong> Хорошей практикой является открытие всех путей с помощью команды <strong>moveto</strong>, потому что без начального <strong>moveto</strong> команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределённому поведению.</p> <table class="standard-table"> <tbody> @@ -188,7 +188,7 @@ translation_of: Web/SVG/Attribute/d <th scope="row">L</th> <td>(<code>x</code>, <code>y</code>)+</td> <td> - <p>Рисует линию из <em>текущей точки в конечную точку определенную</em> <code>x</code>,<code>y</code>. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (<code>L</code>). Формула: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</p> + <p>Рисует линию из <em>текущей точки в конечную точку определённую</em> <code>x</code>,<code>y</code>. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (<code>L</code>). Формула: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</p> </td> </tr> <tr> diff --git a/files/ru/web/svg/attribute/dur/index.html b/files/ru/web/svg/attribute/dur/index.html index 7c28a1e8cc..9cd47365ff 100644 --- a/files/ru/web/svg/attribute/dur/index.html +++ b/files/ru/web/svg/attribute/dur/index.html @@ -54,7 +54,7 @@ translation_of: Web/SVG/Attribute/dur <dl> <dt><code><clock-value></code></dt> - <dd>Задает длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (<code>h</code>), минутах (<code>m</code>), секундах (<code>s</code>) или миллисекундах (<code>ms</code>). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: <code>hh:mm:ss.iii</code> или <code>mm:ss.iii</code></dd> + <dd>Задаёт длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (<code>h</code>), минутах (<code>m</code>), секундах (<code>s</code>) или миллисекундах (<code>ms</code>). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: <code>hh:mm:ss.iii</code> или <code>mm:ss.iii</code></dd> <dt><code>media</code></dt> <dd>Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media.</dd> <dt><code>indefinite</code></dt> @@ -63,7 +63,7 @@ translation_of: Web/SVG/Attribute/dur </dl> <div class="blockIndicator note"> -<p><strong>Примечание:</strong> Интерполяция не будет работать, если простая длительность остается неопределенной (хотя это может быть полезно для элементов {{ SVGElement("set") }}).</p> +<p><strong>Примечание:</strong> Интерполяция не будет работать, если простая длительность остаётся неопределённой (хотя это может быть полезно для элементов {{ SVGElement("set") }}).</p> </div> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/svg/attribute/end/index.html b/files/ru/web/svg/attribute/end/index.html index c4db1e943f..8b0b8d3003 100644 --- a/files/ru/web/svg/attribute/end/index.html +++ b/files/ru/web/svg/attribute/end/index.html @@ -7,7 +7,7 @@ translation_of: Web/SVG/Attribute/end <p>Этот атрибут определяет конечное значение для анимации, которое может ограничить активную длительность.</p> -<p>Значение атрибута представляет собой разделенный точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определенным для {{ SVGAttr("begin") }} атрибута .</p> +<p>Значение атрибута представляет собой разделённый точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определённым для {{ SVGAttr("begin") }} атрибута .</p> <h2 id="Usage_context">Usage context</h2> @@ -32,7 +32,7 @@ translation_of: Web/SVG/Attribute/end </tbody> </table> -<p>Для типов значений, разрешенных в, <code><end-value-list></code> см. {{ SVGAttr("begin") }} атрибут.</p> +<p>Для типов значений, разрешённых в, <code><end-value-list></code> см. {{ SVGAttr("begin") }} атрибут.</p> <h2 id="Examples">Examples</h2> diff --git a/files/ru/web/svg/attribute/fill-rule/index.html b/files/ru/web/svg/attribute/fill-rule/index.html index d83dad58c3..b7c3a793e0 100644 --- a/files/ru/web/svg/attribute/fill-rule/index.html +++ b/files/ru/web/svg/attribute/fill-rule/index.html @@ -9,7 +9,7 @@ translation_of: Web/SVG/Attribute/fill-rule <p class="note"><strong>Note:</strong> Атрибут представления, <code>fill-rule</code> может быть использован как CSS свойство.</p> -<p>Как атрибут представления, он может быть применен к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> +<p>Как атрибут представления, он может быть применён к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> <div id="topExample"> <div class="hidden"> diff --git a/files/ru/web/svg/attribute/font-weight/index.html b/files/ru/web/svg/attribute/font-weight/index.html index 1985975c56..27ae429e31 100644 --- a/files/ru/web/svg/attribute/font-weight/index.html +++ b/files/ru/web/svg/attribute/font-weight/index.html @@ -40,7 +40,7 @@ translation_of: Web/SVG/Attribute/font-weight <li><strong>bold</strong> - соответствует значению <strong>700 </strong>- полужирное начертание</li> <li><strong>normal</strong> - соответствует значению <strong>400 </strong>- нормальное начертание</li> <li><strong>bolder </strong>и <strong>lighter</strong> указывают браузеру использовать соответственно более жирное или более тонкое начертание в сравнении с текущим значением родительского элемента. Дочерние элементы, в свою очередь, унаследуют получившееся значение.</li> - <li><strong>inherit </strong>- дает указание браузеру унаследовать тип начертания от родительского элемента.</li> + <li><strong>inherit </strong>- даёт указание браузеру унаследовать тип начертания от родительского элемента.</li> </ul> <h2 id="Предостережения">Предостережения</h2> diff --git a/files/ru/web/svg/attribute/id/index.html b/files/ru/web/svg/attribute/id/index.html index 54590a4cd4..a8071bb93f 100644 --- a/files/ru/web/svg/attribute/id/index.html +++ b/files/ru/web/svg/attribute/id/index.html @@ -51,7 +51,7 @@ translation_of: Web/SVG/Attribute/id <dl> <dt><id></dt> <dd> - <p>Задает идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать никаких пробелов.</p> + <p>Задаёт идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать никаких пробелов.</p> <div class="blockIndicator note"> <p><strong>Примечание:</strong> Следует избегать использование значений идентификатора, которые будут анализироваться как спецификация представления SVG (например, <code>MyDrawing.svg#svgView(viewBox(0,200,1000,1000))</code>) или базовый фрагмент мультимедиа при использовании в качестве целевого фрагмента URL.</p> diff --git a/files/ru/web/svg/attribute/index.html b/files/ru/web/svg/attribute/index.html index 7d05b490e8..390328c17f 100644 --- a/files/ru/web/svg/attribute/index.html +++ b/files/ru/web/svg/attribute/index.html @@ -12,7 +12,7 @@ translation_of: Web/SVG/Attribute --- <p>« <a href="/ru/docs/Web/SVG" title="ru/docs/Web/SVG">SVG</a> / <a href="/ru/docs/Web/SVG/Элемент" title="ru/docs/Web/SVG/Элемент">Справочник SVG элементов</a> »</p> -<p>Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться. Ниже приведен список всех атрибутов, доступных в SVG, а также ссылки на справочную документацию, помогающие узнать, какие элементы поддерживают их и как они работают.</p> +<p>Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться. Ниже приведён список всех атрибутов, доступных в SVG, а также ссылки на справочную документацию, помогающие узнать, какие элементы поддерживают их и как они работают.</p> <h2 id="SVG_Атрибуты_от_А_до_Я">SVG Атрибуты от А до Я</h2> diff --git a/files/ru/web/svg/attribute/keytimes/index.html b/files/ru/web/svg/attribute/keytimes/index.html index d1db1c495f..cd7f423869 100644 --- a/files/ru/web/svg/attribute/keytimes/index.html +++ b/files/ru/web/svg/attribute/keytimes/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Attribute/keyTimes --- <p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p> -<p>Атрибут <code>keyTimes</code> представляет собой разделенный точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке <code>keyTimes</code> задается как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.</p> +<p>Атрибут <code>keyTimes</code> представляет собой разделённый точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке <code>keyTimes</code> задаётся как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.</p> <p>Если указан список <code>keyTimes</code>, то в списке <code>keyTimes</code> должно быть ровно столько же значений, сколько в списке {{ SVGAttr("values") }} .</p> @@ -14,8 +14,8 @@ translation_of: Web/SVG/Attribute/keyTimes <p>Семантика списка keyTimes зависит от режима интерполяции:</p> <ul> - <li>Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задается; значения являются интерполяцией между ключевыми моментами.</li> - <li>Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задается; Функция анимации использует это значение до следующего времени, определенного в <code>keyTimes</code>.</li> + <li>Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задаётся; значения являются интерполяцией между ключевыми моментами.</li> + <li>Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задаётся; Функция анимации использует это значение до следующего времени, определённого в <code>keyTimes</code>.</li> </ul> <p>Если в качестве режима интерполяции используется <em>paced</em>, атрибут <code>keyTimes </code>игнорируется.</p> diff --git a/files/ru/web/svg/attribute/lang/index.html b/files/ru/web/svg/attribute/lang/index.html index 86317240f1..88fbec8090 100644 --- a/files/ru/web/svg/attribute/lang/index.html +++ b/files/ru/web/svg/attribute/lang/index.html @@ -7,11 +7,11 @@ translation_of: Web/SVG/Attribute/lang --- <div>{{SVGRef}}</div> -<p><span class="seoSummary">Атрибут <strong><code>lang</code></strong> указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определенных элементов.</span></p> +<p><span class="seoSummary">Атрибут <strong><code>lang</code></strong> указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определённых элементов.</span></p> -<p>Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имен). Если определены оба атрибута, то используется тот, который имеет пространство имен, а атрибут без пространства имен игнорируется.</p> +<p>Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имён). Если определены оба атрибута, то используется тот, который имеет пространство имён, а атрибут без пространства имён игнорируется.</p> -<p>В SVG 1.1 существовал атрибут <code>lang</code>, определенный с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">формате BCP 47</a>. Глиф предназначался для использования, если атрибут <code>xml:lang</code> точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут <code>xml:lang</code> точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".</p> +<p>В SVG 1.1 существовал атрибут <code>lang</code>, определённый с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">формате BCP 47</a>. Глиф предназначался для использования, если атрибут <code>xml:lang</code> точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут <code>xml:lang</code> точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".</p> <p>Все элементы используют этот атрибут.</p> @@ -43,9 +43,9 @@ translation_of: Web/SVG/Attribute/lang <dl> <dt><code><language-tag></code></dt> <dd> - <p>Это значение указывает язык, используемый для элемента. Синтаксис этого значения определен в <a href="https://tools.ietf.org/html/bcp47#section-2.1">спецификации BCP 47</a>.</p> + <p>Это значение указывает язык, используемый для элемента. Синтаксис этого значения определён в <a href="https://tools.ietf.org/html/bcp47#section-2.1">спецификации BCP 47</a>.</p> - <p>Наиболее распространенным синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделенных знаком минус. Например, <code>en-US</code> для американского английского языка или <code>de-AT</code> для австрийского немецкого.</p> + <p>Наиболее распространённым синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделённых знаком минус. Например, <code>en-US</code> для американского английского языка или <code>de-AT</code> для австрийского немецкого.</p> </dd> </dl> @@ -63,7 +63,7 @@ translation_of: Web/SVG/Attribute/lang <tr> <td>{{SpecName("SVG2", "struct.html#LangAttribute", "lang")}}</td> <td>{{Spec2("SVG2")}}</td> - <td>Сделал атрибут {{SVGAttr("lang")}} (без пространства имен) доступным для всех элементов и определил взаимодействие между ними.</td> + <td>Сделал атрибут {{SVGAttr("lang")}} (без пространства имён) доступным для всех элементов и определил взаимодействие между ними.</td> </tr> <tr> <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementLangAttribute", "lang")}}</td> diff --git a/files/ru/web/svg/attribute/patterncontentunits/index.html b/files/ru/web/svg/attribute/patterncontentunits/index.html index 5a9258a1f4..82030dbd1b 100644 --- a/files/ru/web/svg/attribute/patterncontentunits/index.html +++ b/files/ru/web/svg/attribute/patterncontentunits/index.html @@ -5,11 +5,11 @@ translation_of: Web/SVG/Attribute/patternContentUnits --- <p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> -<p>Атрибут <code>patternContentUnits</code> определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметьте, что этот атрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определен на {{ SVGElement("pattern") }} элементе.</p> +<p>Атрибут <code>patternContentUnits</code> определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметьте, что этот атрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определён на {{ SVGElement("pattern") }} элементе.</p> -<p>Если <code>patternContentUnits</code> атрибут не определен, то его значение предполагается равным <code>userSpaceOnUse</code>.</p> +<p>Если <code>patternContentUnits</code> атрибут не определён, то его значение предполагается равным <code>userSpaceOnUse</code>.</p> -<p>Заметьте, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах атрибуты контента . Это означает, что, если вы задаете значение <code>patternContentUnits</code> равным <code>objectBoundingBox</code>, значения, указанные в процентах, будут пересчитаны, как если бы вы задали <code>userSpaceOnUse</code>.</p> +<p>Заметьте, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах атрибуты контента . Это означает, что, если вы задаёте значение <code>patternContentUnits</code> равным <code>objectBoundingBox</code>, значения, указанные в процентах, будут пересчитаны, как если бы вы задали <code>userSpaceOnUse</code>.</p> <h2 id="Контекст_использования">Контекст использования</h2> @@ -45,7 +45,7 @@ translation_of: Web/SVG/Attribute/patternContentUnits <h2 id="Элементы">Элементы</h2> -<p>Атрибут <code>patternContentUnits</code> может быть определен на следующих элементах:</p> +<p>Атрибут <code>patternContentUnits</code> может быть определён на следующих элементах:</p> <ul> <li>{{ SVGElement("pattern") }}</li> diff --git a/files/ru/web/svg/attribute/r/index.html b/files/ru/web/svg/attribute/r/index.html index 1f92d75024..5114420ac3 100644 --- a/files/ru/web/svg/attribute/r/index.html +++ b/files/ru/web/svg/attribute/r/index.html @@ -71,7 +71,7 @@ translation_of: Web/SVG/Attribute/r <p>Для {{ SVGElement("radialGradient") }}, <code>r</code> устанавливает радиус конечной окружности радиального градиента.</p> -<p>Градиент будет нарисован таким образом, чтобы <strong>100%</strong> конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведет к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента {{ SVGElement("stop") }}.</p> +<p>Градиент будет нарисован таким образом, чтобы <strong>100%</strong> конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведёт к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента {{ SVGElement("stop") }}.</p> <table class="standard-table"> <tbody> diff --git a/files/ru/web/svg/attribute/repeatcount/index.html b/files/ru/web/svg/attribute/repeatcount/index.html index ad584e3305..0023ba65af 100644 --- a/files/ru/web/svg/attribute/repeatcount/index.html +++ b/files/ru/web/svg/attribute/repeatcount/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Attribute/repeatCount --- <p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> -<p>Данный атрибут задает, сколько раз должна выполняться анимация.</p> +<p>Данный атрибут задаёт, сколько раз должна выполняться анимация.</p> <p>Значение атрибута определяет количество итераций. Принимаются числа с плавающей точкой, которые интерпретируются как доля итерации. Значение должно быть больше нуля.</p> diff --git a/files/ru/web/svg/attribute/rx/index.html b/files/ru/web/svg/attribute/rx/index.html index 78f0ab86e0..c033fd34aa 100644 --- a/files/ru/web/svg/attribute/rx/index.html +++ b/files/ru/web/svg/attribute/rx/index.html @@ -59,7 +59,7 @@ translation_of: Web/SVG/Attribute/rx <p>Способ интерпретации значения атрибута <code>rx</code> зависит как от атрибута {{SVGAttr("ry")}} , так и от ширины прямоугольника:</p> <ul> - <li>Если правильно задано значение для <code>rx</code>, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.</li> + <li>Если правильно задано значение для <code>rx</code>, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.</li> <li>Если ни <code>rx</code>, ни {{SVGAttr("ry")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.</li> <li>Если <code>rx</code> больше половины ширины прямоугольника, то браузер будет считать значение <code>rx</code> половиной ширины прямоугольника.</li> </ul> diff --git a/files/ru/web/svg/attribute/ry/index.html b/files/ru/web/svg/attribute/ry/index.html index f0b87c7a46..9267facd7f 100644 --- a/files/ru/web/svg/attribute/ry/index.html +++ b/files/ru/web/svg/attribute/ry/index.html @@ -59,7 +59,7 @@ translation_of: Web/SVG/Attribute/ry <p>Способ интерпретации значения атрибута <code>ry</code> зависит как от атрибута {{SVGAttr("rx")}} , так и от ширины прямоугольника:</p> <ul> - <li>Если правильно задано значение для <code>ry</code>, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.</li> + <li>Если правильно задано значение для <code>ry</code>, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.</li> <li>Если ни <code>ry</code>, ни {{SVGAttr("rx")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.</li> <li>Если <code>ry</code> больше половины ширины прямоугольника, то браузер будет считать значение <code>ry</code> половиной ширины прямоугольника.</li> </ul> diff --git a/files/ru/web/svg/attribute/shape-rendering/index.html b/files/ru/web/svg/attribute/shape-rendering/index.html index 9110b8ce42..d5b03117ab 100644 --- a/files/ru/web/svg/attribute/shape-rendering/index.html +++ b/files/ru/web/svg/attribute/shape-rendering/index.html @@ -32,13 +32,13 @@ translation_of: Web/SVG/Attribute/shape-rendering <dl> <dt>auto</dt> - <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> <span class="hps">внести соответствующие</span> <span class="hps">компромиссы</span><span>, чтобы сбалансировать</span> <span class="hps">скорость рендеринга,</span> <span class="hps">четкие края</span> <span class="hps">и</span> <span class="hps">геометрическую</span> <span class="hps">точность</span><span>, но </span><span class="hps">геометрической точности</span> <span class="hps">уделять более пристальное внимание</span><span>, чем</span> <span class="hps">скорости и</span> <span class="hps">четким краями</span><span>.</span></span></dd> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> <span class="hps">внести соответствующие</span> <span class="hps">компромиссы</span><span>, чтобы сбалансировать</span> <span class="hps">скорость рендеринга,</span> <span class="hps">чёткие края</span> <span class="hps">и</span> <span class="hps">геометрическую</span> <span class="hps">точность</span><span>, но </span><span class="hps">геометрической точности</span> <span class="hps">уделять более пристальное внимание</span><span>, чем</span> <span class="hps">скорости и</span> <span class="hps">чётким краями</span><span>.</span></span></dd> <dt>optimizeSpeed</dt> - <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен</span> акцентироваться на <span class="hps">скорость рендеринга, в ущерб</span> <span class="hps">геометрической</span> <span class="hps">точности и</span> <span class="hps">четким краями</span><span>.</span> <span class="hps">Эту опцию</span> также можно<span class="hps"> указывать,</span><span>, чтобы отключить</span> <span class="hps">сглаживание фигур</span><span>.</span></span></dd> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен</span> акцентироваться на <span class="hps">скорость рендеринга, в ущерб</span> <span class="hps">геометрической</span> <span class="hps">точности и</span> <span class="hps">чётким краями</span><span>.</span> <span class="hps">Эту опцию</span> также можно<span class="hps"> указывать,</span><span>, чтобы отключить</span> <span class="hps">сглаживание фигур</span><span>.</span></span></dd> <dt>crispEdges</dt> - <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен попытаться</span> акцентировать <span class="hps">на контрасте</span> <span class="hps">чистых</span> <span class="hps">краев</span> рисунков, в ущерб<span class="hps"> скорости</span> <span class="hps">рендеринга</span> <span class="hps">и геометрической</span> <span class="hps">точности.</span> <span class="hps">Для достижения</span> наилучшего результата четкости<span class="hps"> края</span><span>, браузер</span><span class="hps"> может</span> <span class="hps">отключить</span> <span class="hps">сглаживание для</span> <span class="hps">всех</span> <span class="hps">линий и кривых</span> <span class="hps">или, возможно,</span> <span class="hps">только для</span> <span class="hps">прямых</span><span>, близких к</span> <span class="hps">вертикальным или горизонтальным.</span> <span class="hps">Кроме того,</span> <span class="hps">браузер может</span> <span class="hps">скорректировать позиции</span> <span class="hps">строк и</span> <span class="hps">ширину линий</span> <span class="hps">для выравнивания</span> <span class="hps">краев</span> <span class="hps">с</span> <span class="hps">пикселями устройства</span><span>.</span></span></dd> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен попытаться</span> акцентировать <span class="hps">на контрасте</span> <span class="hps">чистых</span> <span class="hps">краёв</span> рисунков, в ущерб<span class="hps"> скорости</span> <span class="hps">рендеринга</span> <span class="hps">и геометрической</span> <span class="hps">точности.</span> <span class="hps">Для достижения</span> наилучшего результата чёткости<span class="hps"> края</span><span>, браузер</span><span class="hps"> может</span> <span class="hps">отключить</span> <span class="hps">сглаживание для</span> <span class="hps">всех</span> <span class="hps">линий и кривых</span> <span class="hps">или, возможно,</span> <span class="hps">только для</span> <span class="hps">прямых</span><span>, близких к</span> <span class="hps">вертикальным или горизонтальным.</span> <span class="hps">Кроме того,</span> <span class="hps">браузер может</span> <span class="hps">скорректировать позиции</span> <span class="hps">строк и</span> <span class="hps">ширину линий</span> <span class="hps">для выравнивания</span> <span class="hps">краёв</span> <span class="hps">с</span> <span class="hps">пикселями устройства</span><span>.</span></span></dd> <dt>geometricPrecision</dt> - <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> акцентировать <span class="hps">геометрическую</span> <span class="hps">точность в ущерб</span> <span class="hps">скорости и</span> <span class="hps">четкими краям</span></span>.</dd> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> акцентировать <span class="hps">геометрическую</span> <span class="hps">точность в ущерб</span> <span class="hps">скорости и</span> <span class="hps">чёткими краям</span></span>.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/svg/attribute/stroke/index.html b/files/ru/web/svg/attribute/stroke/index.html index d6ddd0420a..29332e0327 100644 --- a/files/ru/web/svg/attribute/stroke/index.html +++ b/files/ru/web/svg/attribute/stroke/index.html @@ -39,7 +39,7 @@ translation_of: Web/SVG/Attribute/stroke <h3 id="SVG_Line" name="SVG_Line">SVG Line с stroke</h3> -<h4 id="Пример_1_Нарисуйте_прямую_зеленую_линию_используя_stroke.">Пример 1: Нарисуйте прямую зеленую линию, используя <strong>stroke</strong>.</h4> +<h4 id="Пример_1_Нарисуйте_прямую_зелёную_линию_используя_stroke.">Пример 1: Нарисуйте прямую зелёную линию, используя <strong>stroke</strong>.</h4> <pre class="brush: html"><svg height="50" width="300"> <path stroke="green" d="M5 20 1215 0" /> @@ -47,7 +47,7 @@ translation_of: Web/SVG/Attribute/stroke <p>{{EmbedLiveSample('Example1_Draw_straight_green_line_using_stroke.', '300', '50', '', 'Web/SVG/Attribute/stroke')}}</p> -<h4 id="Пример_2_Нарисуйте_черный_круг_с_синей_рамкой_используя_stroke.">Пример 2: Нарисуйте черный круг с синей рамкой используя stroke.</h4> +<h4 id="Пример_2_Нарисуйте_чёрный_круг_с_синей_рамкой_используя_stroke.">Пример 2: Нарисуйте чёрный круг с синей рамкой используя stroke.</h4> <pre class="brush: html"><svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" /> diff --git a/files/ru/web/svg/attribute/text-anchor/index.html b/files/ru/web/svg/attribute/text-anchor/index.html index 9ffcbe7be3..d974c6e812 100644 --- a/files/ru/web/svg/attribute/text-anchor/index.html +++ b/files/ru/web/svg/attribute/text-anchor/index.html @@ -51,7 +51,7 @@ translation_of: Web/SVG/Attribute/text-anchor правому выравниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.</dd> <dt>Примечание</dt> <dd>В <strong>IE</strong>-11 атрибут <code><strong>text-anchor</strong></code> не имеет эффекта при привязке текста к заданному пути <strong><code>path</code></strong> посредством тега <code><strong>textPath</strong></code>.<br> - В приведенном ниже примере тег <strong><code>path</code></strong> использовался только лишь для отрисовки линий и с расположением текста никак не связан.</dd> + В приведённом ниже примере тег <strong><code>path</code></strong> использовался только лишь для отрисовки линий и с расположением текста никак не связан.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/svg/attribute/transform/index.html b/files/ru/web/svg/attribute/transform/index.html index c202361239..944d0b51b0 100644 --- a/files/ru/web/svg/attribute/transform/index.html +++ b/files/ru/web/svg/attribute/transform/index.html @@ -71,7 +71,7 @@ translation_of: Web/SVG/Attribute/transform <!-- Это элемент до применения переноса и поворота --> <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> </strong>fill-opacity=0.2 stroke-opacity=0.2></rect> - <!-- Здесь мы добавим текстовый элемент, повернем и перенесем оба элемента --> + <!-- Здесь мы добавим текстовый элемент, повернём и перенесём оба элемента --> <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> transform="translate(30) rotate(45 50 50)"</strong>></rect> <text x="60" y="105" <strong>transform="translate(30) rotate(45 50 50)"</strong>> Hello Moz! </text> diff --git a/files/ru/web/svg/attribute/values/index.html b/files/ru/web/svg/attribute/values/index.html index 72929084aa..d0544c82b8 100644 --- a/files/ru/web/svg/attribute/values/index.html +++ b/files/ru/web/svg/attribute/values/index.html @@ -7,12 +7,12 @@ translation_of: Web/SVG/Attribute/values <p>Атрибут <code>values</code> имеет два значения в зависимости от используемого контекста.</p> -<p>Для элементов анимации атрибут <code>values</code> представляет собой разделенный точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список <code>values</code>, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.</p> +<p>Для элементов анимации атрибут <code>values</code> представляет собой разделённый точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список <code>values</code>, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.</p> <p>Для элемента {{ SVGElement("feColorMatrix") }} содержимое <code>values</code> зависит от значения атрибута {{ SVGAttr("type") }}:</p> <ul> - <li>Для <code>type="matrix"</code>, <code>values</code> — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделенных пробелами и/или запятой.</li> + <li>Для <code>type="matrix"</code>, <code>values</code> — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделённых пробелами и/или запятой.</li> <li>Для <code>type="saturate"</code>, <code>values</code> — это единственное вещественное число (от 0 до 1).</li> <li>Для <code>type="hueRotate"</code>, <code>values</code> — это одно вещественное число (градусов).</li> <li>Для <code>type="luminanceToAlpha"</code>, <code>values</code> не применимы.</li> diff --git a/files/ru/web/svg/attribute/viewbox/index.html b/files/ru/web/svg/attribute/viewbox/index.html index 1433367c9d..a3ad81efdb 100644 --- a/files/ru/web/svg/attribute/viewbox/index.html +++ b/files/ru/web/svg/attribute/viewbox/index.html @@ -9,7 +9,7 @@ translation_of: Web/SVG/Attribute/viewBox <p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Аттрибут </span></font>viewBox</code> определяет расположение и размеры окна отображения SVG.</p> -<p>Значение атрибута <code>viewBox</code> — это набор четырех чисел: <code>min-x</code>, <code>min-y</code>, <code>width</code> и <code>height</code>, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport">браузера</a>).</p> +<p>Значение атрибута <code>viewBox</code> — это набор четырёх чисел: <code>min-x</code>, <code>min-y</code>, <code>width</code> и <code>height</code>, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport">браузера</a>).</p> <div class="hidden"> <pre class="notranslate">html, body, svg { diff --git a/files/ru/web/svg/element/animate/index.html b/files/ru/web/svg/element/animate/index.html index 834677e633..0e6bda67b7 100644 --- a/files/ru/web/svg/element/animate/index.html +++ b/files/ru/web/svg/element/animate/index.html @@ -11,7 +11,7 @@ original_slug: Web/SVG/Элемент/animate --- <div>{{SVGRef}}</div> -<p> Тег <animate> может быть помещен внутри какой-то фигуры, например, <circle> . Он задает анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определенным интервалом.</p> +<p> Тег <animate> может быть помещён внутри какой-то фигуры, например, <circle> . Он задаёт анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определённым интервалом.</p> <h2 id="Использование">Использование</h2> diff --git a/files/ru/web/svg/element/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.html index 9a99ec4c5a..c585368d3c 100644 --- a/files/ru/web/svg/element/animatemotion/index.html +++ b/files/ru/web/svg/element/animatemotion/index.html @@ -102,7 +102,7 @@ original_slug: Web/SVG/Элемент/animateMotion <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("svg.elements.animateMotion")}}</p> diff --git a/files/ru/web/svg/element/feblend/index.html b/files/ru/web/svg/element/feblend/index.html index a131dd6aa6..371ca3dab7 100644 --- a/files/ru/web/svg/element/feblend/index.html +++ b/files/ru/web/svg/element/feblend/index.html @@ -8,7 +8,7 @@ original_slug: Web/SVG/Элемент/feBlend --- <div>{{SVGRef}}</div> -<p><a href="/en-US/docs/Web/SVG">SVG </a>фильтр примитивна <strong><code><feBlend></code></strong> объединяет два объекта, управляемых определенным режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоев. Режим определяется атрибутом {{SVGAttr("mode")}}.</p> +<p><a href="/en-US/docs/Web/SVG">SVG </a>фильтр примитивна <strong><code><feBlend></code></strong> объединяет два объекта, управляемых определённым режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоёв. Режим определяется атрибутом {{SVGAttr("mode")}}.</p> <h2 id="Используемый_контекст">Используемый контекст</h2> diff --git a/files/ru/web/svg/element/foreignobject/index.html b/files/ru/web/svg/element/foreignobject/index.html index d247cea432..a48e75e668 100644 --- a/files/ru/web/svg/element/foreignobject/index.html +++ b/files/ru/web/svg/element/foreignobject/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/foreignObject original_slug: Web/SVG/Элемент/foreignObject --- <div>{{SVGRef}}<br> -Элемент <strong><code><foreignObject></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет включать другое пространство имен XML.<br> +Элемент <strong><code><foreignObject></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет включать другое пространство имён XML.<br> В контексте браузера это, скорее всего, XHTML / HTML.</div> <div id="Exemple"> @@ -30,7 +30,7 @@ original_slug: Web/SVG/Элемент/foreignObject <!-- Типичный пример использования: встраивание HTML-текста в SVG --> <foreignObject x="20" y="20" width="160" height="160"> <!-- -В контексте SVG, внедренного в HTML, пространство имен XHTML может и следует избегать, +В контексте SVG, внедрённого в HTML, пространство имён XHTML может и следует избегать, но это обязательно в контексте документа SVG --> <div xmlns="http://www.w3.org/1999/xhtml"> diff --git a/files/ru/web/svg/element/rect/index.html b/files/ru/web/svg/element/rect/index.html index 0fdc102ad9..1e76b55a6a 100644 --- a/files/ru/web/svg/element/rect/index.html +++ b/files/ru/web/svg/element/rect/index.html @@ -9,7 +9,7 @@ original_slug: Web/SVG/Элемент/rect --- <div>{{SVGRef}}</div> -<p><code><rect></code> - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скругленными углами.</p> +<p><code><rect></code> - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скруглёнными углами.</p> <h2 id="Контекст_использования">Контекст использования</h2> @@ -20,7 +20,7 @@ original_slug: Web/SVG/Элемент/rect <td>Простая фигура, Графический элемент</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Любое количество указанных элементов в любом порядке:<br> <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Элементы анимации</a> »<br> <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Элементы описания</a> »</td> @@ -50,7 +50,7 @@ original_slug: Web/SVG/Элемент/rect <p>» <a href="https://mdn.mozillademos.org/files/8893/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p> -<h3 id="<rect>_со_скругленными_углами"><code><rect></code> со скругленными углами</h3> +<h3 id="<rect>_со_скруглёнными_углами"><code><rect></code> со скруглёнными углами</h3> <p> </p> diff --git a/files/ru/web/svg/element/text/index.html b/files/ru/web/svg/element/text/index.html index ffb6583fb6..e7cc42214d 100644 --- a/files/ru/web/svg/element/text/index.html +++ b/files/ru/web/svg/element/text/index.html @@ -27,7 +27,7 @@ original_slug: Web/SVG/Элемент/<text> .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } - /* Обратите внимание, что цвет текста задается с помощью * + /* Обратите внимание, что цвет текста задаётся с помощью * * fill свойства, а свойство color используется только для HTML */ .Rrrrr { font: italic 40px serif; fill: red; } </style> @@ -195,7 +195,7 @@ original_slug: Web/SVG/Элемент/<text> <h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("svg.elements.text")}}</p> diff --git a/files/ru/web/svg/element/use/index.html b/files/ru/web/svg/element/use/index.html index 39e26289f3..1efa68b4e0 100644 --- a/files/ru/web/svg/element/use/index.html +++ b/files/ru/web/svg/element/use/index.html @@ -43,7 +43,7 @@ original_slug: Web/SVG/Элемент/use По соображениям безопасности, браузеры могут применять <a href="/en-US/docs/Web/Security/Same-origin_policy">правило ограничения домена</a> для элементов <code>use</code> и могут отказаться загружать URL другого источника в атрибуте {{SVGAttr("href")}}.</p> <div class="warning"> -<p>Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее, на практике всё еще может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите <a href="#browser-compatibility">таблицу совместимости</a> ниже).</p> +<p>Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее, на практике всё ещё может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите <a href="#browser-compatibility">таблицу совместимости</a> ниже).</p> </div> <h2 id="Атрибуты">Атрибуты</h2> diff --git a/files/ru/web/svg/svg_1.1_support_in_firefox/index.html b/files/ru/web/svg/svg_1.1_support_in_firefox/index.html index b552e8a208..0cf6a5ef86 100644 --- a/files/ru/web/svg/svg_1.1_support_in_firefox/index.html +++ b/files/ru/web/svg/svg_1.1_support_in_firefox/index.html @@ -97,7 +97,7 @@ translation_of: Web/SVG/SVG_1.1_Support_in_Firefox <ul> <li>Выполнена.</li> <li>Не полностью соблюдает <svg:use> каскадные правила ({{Bug(265894)}}).</li> - <li>Не передает события в дерево SVGElementInstance ({{Bug(265895)}}).</li> + <li>Не передаёт события в дерево SVGElementInstance ({{Bug(265895)}}).</li> </ul> </td> </tr> @@ -238,7 +238,7 @@ translation_of: Web/SVG/SVG_1.1_Support_in_Firefox <td style="background-color: rgb(204, 204, 204);"><a href="https://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> <td style="background-color: rgb(204, 204, 204);"> <ul> - <li>Эта функция, представленная в раннем проекте спецификации, была удалена из нее и поэтому не реализована ({{Bug(273171)}}).</li> + <li>Эта функция, представленная в раннем проекте спецификации, была удалена из неё и поэтому не реализована ({{Bug(273171)}}).</li> </ul> </td> </tr> @@ -376,7 +376,7 @@ translation_of: Web/SVG/SVG_1.1_Support_in_Firefox <li>Выполнена.</li> <li>Из псевдо-входов:<br> <code>SourceGraphic</code>, <code>SourceAlpha</code>, <code>FillPaint</code> {{gecko_minversion_inline("17")}} и <code>StrokePaint</code> {{gecko_minversion_inline("17")}} - реализованы.</li> - <li>Использование нереализованного псевдо-входного или фильтрующего элемента приведет к игнорированию фильтра и рисованию обратного графика без какого-либо фильтра.</li> + <li>Использование нереализованного псевдо-входного или фильтрующего элемента приведёт к игнорированию фильтра и рисованию обратного графика без какого-либо фильтра.</li> </ul> </td> </tr> diff --git a/files/ru/web/svg/tutorial/basic_shapes/index.html b/files/ru/web/svg/tutorial/basic_shapes/index.html index 290e5af23d..882ce4142f 100644 --- a/files/ru/web/svg/tutorial/basic_shapes/index.html +++ b/files/ru/web/svg/tutorial/basic_shapes/index.html @@ -111,7 +111,7 @@ original_slug: Web/SVG/Tutorial/Основные_Фигуры <h3 id="Polyline" name="Polyline">Ломаная линия</h3> -<p>Элемент <a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">polyline</a> воспроизводит группу соединенных прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:</p> +<p>Элемент <a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">polyline</a> воспроизводит группу соединённых прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:</p> <pre class="brush:xml;gutter:false;"><polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/></pre> @@ -133,7 +133,7 @@ original_slug: Web/SVG/Tutorial/Основные_Фигуры <h3 id="Path" name="Path">Путь</h3> -<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a>, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закругленными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">в следующей секции</a> этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.</p> +<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a>, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закруглёнными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">в следующей секции</a> этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.</p> <pre class="brush:xml;gutter:false;"><path d="M 20 230 Q 40 205, 50 230 T 90230"/></pre> diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html index 698933241a..634ef93da3 100644 --- a/files/ru/web/svg/tutorial/basic_transformations/index.html +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html @@ -24,14 +24,14 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <h2 id="Перемещения">Перемещения</h2> -<p>Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определенным атрибутам. Для этого используется <code>translate()</code>.</p> +<p>Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определённым атрибутам. Для этого используется <code>translate()</code>.</p> <pre class="brush: html notranslate"><svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> </pre> -<p>Пример генерирует прямоугольник, перемещенный в точку (30,40) вместо точки (0,0).</p> +<p>Пример генерирует прямоугольник, перемещённый в точку (30,40) вместо точки (0,0).</p> <p>{{ EmbedLiveSample('Translation', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p> @@ -46,7 +46,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования </svg> </pre> -<p>Данный пример показывает квадрат который повернули на 45 градусов. Значение для <code>rotate()</code> задается в градусах.</p> +<p>Данный пример показывает квадрат который повернули на 45 градусов. Значение для <code>rotate()</code> задаётся в градусах.</p> <p>{{ EmbedLiveSample('Rotation', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p> @@ -60,7 +60,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <h2 id="Комплексные_перемещения_с_matrix"><strong id="docs-internal-guid-68ee5272-9619-cb26-01de-19a4df728cd5">Комплексные перемещения с <code>matrix()</code></strong></h2> -<p>Все приведенные выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью <code>matrix(a, b, c, d, e, f)</code>, которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:</p> +<p>Все приведённые выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью <code>matrix(a, b, c, d, e, f)</code>, которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:</p> <p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right. </annotation></semantics></math></p> @@ -68,7 +68,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <h2 id="Эффекты_на_системе_координат">Эффекты на системе координат</h2> -<p>В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повернуты, перемещены и смаштабированы в соответствии с преобразованиями.</p> +<p>В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повёрнуты, перемещены и смаштабированы в соответствии с преобразованиями.</p> <pre class="brush: html notranslate"><svg width="100" height="100"> <g transform="scale(2)"> diff --git a/files/ru/web/svg/tutorial/clipping_and_masking/index.html b/files/ru/web/svg/tutorial/clipping_and_masking/index.html index f5d2198fc8..c87cfa7287 100644 --- a/files/ru/web/svg/tutorial/clipping_and_masking/index.html +++ b/files/ru/web/svg/tutorial/clipping_and_masking/index.html @@ -8,7 +8,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking <p> </p> -<p>На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнетесь со следующими свойствами.<br> +<p>На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнётесь со следующими свойствами.<br> <br> <strong>Обрезка (Clipping) </strong>позволяет скрыть часть одного или нескольких элементов, используя другой. В этом случае нельзя настроить прозрачность элемента, это подход «все или ничего».<br> <br> @@ -29,7 +29,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking </svg> </pre> -<p>По центру (100,100) нарисован круг с радиусом 100. Атрибут<code> clip-path</code> ссылается на элемент <code>{{ SVGElement("clipPath") }}</code>, который содержит элемент <code>rect</code>. Этот прямоугольник позволит отрисовать верхнюю половину черного холста. Обратите внимание, что элемент <code>clipPath</code> обычно помещается в раздел <code>defs</code>.<br> +<p>По центру (100,100) нарисован круг с радиусом 100. Атрибут<code> clip-path</code> ссылается на элемент <code>{{ SVGElement("clipPath") }}</code>, который содержит элемент <code>rect</code>. Этот прямоугольник позволит отрисовать верхнюю половину чёрного холста. Обратите внимание, что элемент <code>clipPath</code> обычно помещается в раздел <code>defs</code>.<br> <br> При этом сам прямоугольник отрисован не будет. Вместо этого прямоугольник задаст область отрисовки. Так как прямоугольник перекрывает только верхнюю половину круга, нижняя половина круга исчезает:</p> @@ -57,7 +57,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking </svg> </pre> -<p>Фактически на примере находятся два прямоугольника: зеленый на нижнем слое и красный на верхнем. У красного есть атрибут <code>mask</code>, который ссылается на элемент <code>mask</code>. Содержимое маски это элемент <code>rect</code>, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зеленый градиент: </p> +<p>Фактически на примере находятся два прямоугольника: зелёный на нижнем слое и красный на верхнем. У красного есть атрибут <code>mask</code>, который ссылается на элемент <code>mask</code>. Содержимое маски это элемент <code>rect</code>, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зелёный градиент: </p> <p>{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}</p> @@ -78,7 +78,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking <p>{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}</p> -<p>В этом примере используется красный круг на голубом фоне. Желтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.</p> +<p>В этом примере используется красный круг на голубом фоне. Жёлтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.</p> <h2 id="Использование_хорошо_известных_CSS_техник">Использование хорошо известных CSS техник</h2> diff --git a/files/ru/web/svg/tutorial/fills_and_strokes/index.html b/files/ru/web/svg/tutorial/fills_and_strokes/index.html index 0ba67eee54..e113c00376 100644 --- a/files/ru/web/svg/tutorial/fills_and_strokes/index.html +++ b/files/ru/web/svg/tutorial/fills_and_strokes/index.html @@ -34,7 +34,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg></pre> -<p>Свойство <em>stroke-width </em>определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображен розовым, а обводка - черным.</p> +<p>Свойство <em>stroke-width </em>определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка - черным.</p> <p>Второй атрибут, влияющий на обводку - свойство <em>stroke-linecap. </em>Демонстрируется выше. Свойство управляет отображением концов линий.</p> @@ -43,7 +43,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes <ul> <li><code>butt</code> обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.</li> <li><code>square</code> в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка - это половина заданного значения <em>stroke-width.</em></li> - <li><code>round</code> задаёт закругленные углы по краям обводки. Радиус этих кривых также управляется параметром <em>stroke-width.</em></li> + <li><code>round</code> задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром <em>stroke-width.</em></li> </ul> <p>Используйте<code><em> </em>stroke-linejoin</code>, чтобы определить, как соединять обводку двух сегментов линии.</p> @@ -66,7 +66,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes <ul> <li><code>miter </code>продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.</li> - <li><code>round </code>создаёт закругленный сегмент линии</li> + <li><code>round </code>создаёт закруглённый сегмент линии</li> <li><code>bevel </code>создаёт новый угол для помощи в переходе между двумя сегментами</li> </ul> @@ -82,13 +82,13 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> </svg></pre> -<p>В качестве аргумента атрибут <code>stroke-dasharray </code>принимает последовательность чисел, разделенных запятой.</p> +<p>В качестве аргумента атрибут <code>stroke-dasharray </code>принимает последовательность чисел, разделённых запятой.</p> <div class="note"> <p>Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).</p> </div> -<p>Первое число определяет длину штриха, второе - длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берет эти числа дважды, чтобы создать четный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми "пикселями". Затем паттерн повторяется.</p> +<p>Первое число определяет длину штриха, второе - длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берет эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми "пикселями". Затем паттерн повторяется.</p> <p>Также есть дополнительные <strong>stroke </strong>и <strong>fill </strong>свойства: <code><a href="/en-US/docs/Web/SVG/Attribute/fill-rule">fill-rule</a>, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя;</code> <code><a href="/en-US/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a>, </code>which determines if a stroke should draw miters<code> и </code><a href="/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a>, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)</p> @@ -103,7 +103,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes <pre class="brush:xml;"> <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> </pre> -<p>или может быть помещен в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <code><head>, </code>как это делается в HTML, она включается в зону <code><defs>, </code>предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.</p> +<p>или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <code><head>, </code>как это делается в HTML, она включается в зону <code><defs>, </code>предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.</p> <pre class="brush:xml;"><?xml version="1.0" standalone="no"?> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> diff --git a/files/ru/web/svg/tutorial/filter_effects/index.html b/files/ru/web/svg/tutorial/filter_effects/index.html index d063063795..13e8214c27 100644 --- a/files/ru/web/svg/tutorial/filter_effects/index.html +++ b/files/ru/web/svg/tutorial/filter_effects/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Tutorial/Filter_effects --- <p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p> -<p>Бывают ситуации, при которых базовые фигуры не обеспечивают гибкость, необходимую для достижения определенного эффекта. Тени, например, не могут быть созданы с помощью комбинации градиентов. Фильтры - это механизм SVG для создания сложных эффектов. <br> +<p>Бывают ситуации, при которых базовые фигуры не обеспечивают гибкость, необходимую для достижения определённого эффекта. Тени, например, не могут быть созданы с помощью комбинации градиентов. Фильтры - это механизм SVG для создания сложных эффектов. <br> <br> Основным примером может послужить эффект размытия в SVG. Базовый эффект размытия может быть достигнут с помощью градиентов, фильтр размытия необходим, чтобы сделать что-либо большее.</p> diff --git a/files/ru/web/svg/tutorial/getting_started/index.html b/files/ru/web/svg/tutorial/getting_started/index.html index c50b5ba0ea..f42a01eda8 100644 --- a/files/ru/web/svg/tutorial/getting_started/index.html +++ b/files/ru/web/svg/tutorial/getting_started/index.html @@ -10,7 +10,7 @@ translation_of: Web/SVG/Tutorial/Getting_Started <h3 id="A_Simple_Example" name="A_Simple_Example">Простой пример</h3> -<p>Давайте начнем наше погружение с простого примера. Посмотрите на код, представленный ниже:</p> +<p>Давайте начнём наше погружение с простого примера. Посмотрите на код, представленный ниже:</p> <pre class="brush: xml"><svg version="1.1" baseProfile="full" @@ -38,12 +38,12 @@ translation_of: Web/SVG/Tutorial/Getting_Started <ul> <li>как известно из (X)HTML, декларацию doctype следует опустить, потому что DTD на основе валидации SVG приводит к бо́льшим проблемам, чем их решает</li> <li>до SVG 2, чтобы обозначить версию SVG для других типов валидации, всегда следует использовать атрибуты <code>version</code> и <code>baseProfile</code>. Но в SVG 2 оба эти атрибута <code>version</code> и <code>baseProfile</code> обрели статус не рекомендованных</li> - <li>как диалект XML, SVG всегда правильно должен связывать пространства имен (в атрибуте xmlns). Смотри страницу <a href="/en/docs/Web/SVG/Namespaces_Crash_Course" title="en-US/Web/SVG/Namespaces_Crash_Course">Namespaces Crash Course</a> для большей информации.</li> + <li>как диалект XML, SVG всегда правильно должен связывать пространства имён (в атрибуте xmlns). Смотри страницу <a href="/en/docs/Web/SVG/Namespaces_Crash_Course" title="en-US/Web/SVG/Namespaces_Crash_Course">Namespaces Crash Course</a> для большей информации.</li> </ul> </li> <li>Фон устанавливается красным при помощи рисования прямоугольника <a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect"><code><rect/></code></a>, который покрывает всю область изображения</li> - <li>Зеленый круг <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle"><code><circle/></code></a> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещен на 150px вправо, и 100px вниз).</li> - <li>Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зеленого круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.</li> + <li>Зелёный круг <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle"><code><circle/></code></a> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещён на 150px вправо, и 100px вниз).</li> + <li>Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зелёного круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.</li> </ol> <h3 id="Основные_свойства_файлов_SVG">Основные свойства файлов SVG</h3> diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html index 2e4ef085cf..45faea509a 100644 --- a/files/ru/web/svg/tutorial/gradients/index.html +++ b/files/ru/web/svg/tutorial/gradients/index.html @@ -42,7 +42,7 @@ translation_of: Web/SVG/Tutorial/Gradients <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> +<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> @@ -95,9 +95,9 @@ translation_of: Web/SVG/Tutorial/Gradients <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>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> +<p>Вторая "точка" называется <strong>фокальной</strong> и задаётся атрибутами <strong>fx</strong> и <strong>fy</strong>. В то время как первые "точки" указывают на внешнюю границу градиента, фокальная "точка" определяет где должна быть его <strong>середина</strong>. Это легко увидеть на примере.</p> <h3 id="Center_and_focal_point">Center and focal point</h3> @@ -128,7 +128,7 @@ translation_of: Web/SVG/Tutorial/Gradients <p>Если фокальная точка передвинута за границы круга, то градиент будет отрисован некорректно. Поэтому фокальная точка обязательно должна быть внутри границы круга (или на самой границе). Если фокальная точка не указана, то по дефолту она совпадает с центром круга.</p> -<p>Линейный и радиальный градиенты также принимают несколько атрибутов, описывающих как они могут изменяться. Единственный атрибут, о котором я хотел бы рассказать более подробно - это <strong><code>spreadMethod</code></strong><code>. Этот атрибут указывает, что должно происходить, когда градиент "достигает" внешней границы градиента, но объект еще не заполнен. Аттрибут может принимать одно и трех значений:</code>"pad", "reflect", или"repeat". "<strong>Pad</strong>" - это то что вы пока что видели: когда градиент достигает "краев", финальный цвет используется для заполнения оставшейся области. "Reflect" - градиент продолжает "двигаться" в "зеркальном" отражении (стартовый цвет берется из 100%, а конечный из 0%). А затем снова "переворачивается". И так до тех пор пока не достигнет края.</p> +<p>Линейный и радиальный градиенты также принимают несколько атрибутов, описывающих как они могут изменяться. Единственный атрибут, о котором я хотел бы рассказать более подробно - это <strong><code>spreadMethod</code></strong><code>. Этот атрибут указывает, что должно происходить, когда градиент "достигает" внешней границы градиента, но объект ещё не заполнен. Аттрибут может принимать одно и трёх значений:</code>"pad", "reflect", или"repeat". "<strong>Pad</strong>" - это то что вы пока что видели: когда градиент достигает "краёв", финальный цвет используется для заполнения оставшейся области. "Reflect" - градиент продолжает "двигаться" в "зеркальном" отражении (стартовый цвет берётся из 100%, а конечный из 0%). А затем снова "переворачивается". И так до тех пор пока не достигнет края.</p> <h3 id="spreadMethod">spreadMethod</h3> @@ -176,6 +176,6 @@ translation_of: Web/SVG/Tutorial/Gradients <p>Вы также можете применить иную трансформацию к градиенту, используя атрибут <strong><code>gradientTransform</code></strong>, но мы пока что <a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">его не изучали</a>, я оставлю это на потом.<br> <br> Существуют и другие предостережения для работы с <br> - <code>gradientUnits="objectBoundingBox"</code>, когда поле ограничения объекта не является квадратным, но они довольно сложны и им придется ждать, пока кто-то другой не соизволит объяснить их.</p> + <code>gradientUnits="objectBoundingBox"</code>, когда поле ограничения объекта не является квадратным, но они довольно сложны и им придётся ждать, пока кто-то другой не соизволит объяснить их.</p> <p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p> diff --git a/files/ru/web/svg/tutorial/introduction/index.html b/files/ru/web/svg/tutorial/introduction/index.html index a3c0f8e0e5..4043b9238a 100644 --- a/files/ru/web/svg/tutorial/introduction/index.html +++ b/files/ru/web/svg/tutorial/introduction/index.html @@ -9,9 +9,9 @@ original_slug: Web/SVG/Tutorial/Введение --- <p>{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}</p> -<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right; height: 418px; width: 235px;"><a href="/en-US/SVG" title="en-US/SVG">SVG</a> это язык <a href="/en-US/XML" title="en-US/XML">XML</a> разметки, схожий с <a href="/en-US/XHTML" title="en-US/XHTML">XHTML</a>, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путем указания всех необходимых линий и форм, путем модификации уже существующих растровых изображений, или путем комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.</p> +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right; height: 418px; width: 235px;"><a href="/en-US/SVG" title="en-US/SVG">SVG</a> это язык <a href="/en-US/XML" title="en-US/XML">XML</a> разметки, схожий с <a href="/en-US/XHTML" title="en-US/XHTML">XHTML</a>, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путём указания всех необходимых линий и форм, путём модификации уже существующих растровых изображений, или путём комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.</p> -<p>В 1999 году, после конкурса нескольких форматов, SVG был включен в <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a>, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными <a class="external" href="https://caniuse.com/#search=svg" title="en-US/W3C">браузерами</a>. Недостатком использования SVG является его медленная загрузка . При этом SVG дает некоторые преимущества, такие как наличие соответствующего <a href="/en-US/docs/Web/API">DOM interface</a>, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.</p> +<p>В 1999 году, после конкурса нескольких форматов, SVG был включён в <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a>, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными <a class="external" href="https://caniuse.com/#search=svg" title="en-US/W3C">браузерами</a>. Недостатком использования SVG является его медленная загрузка . При этом SVG даёт некоторые преимущества, такие как наличие соответствующего <a href="/en-US/docs/Web/API">DOM interface</a>, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.</p> <h3 id="Базовые_компоненты">Базовые компоненты</h3> @@ -21,9 +21,9 @@ original_slug: Web/SVG/Tutorial/Введение <h3 id="Before_you_start" name="Before_you_start">До начала работы</h3> -<p>Существует ряд приложений для рисования, такие как <a class="external" href="http://www.inkscape.org/">Inkscape</a>, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, <a href="/en-US/JavaScript" title="en-US/JavaScript">JavaScript</a> или <a href="/en-US/CSS" title="en-US/CSS">CSS</a>).</p> +<p>Существует ряд приложений для рисования, такие как <a class="external" href="http://www.inkscape.org/">Inkscape</a>, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надёжный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, <a href="/en-US/JavaScript" title="en-US/JavaScript">JavaScript</a> или <a href="/en-US/CSS" title="en-US/CSS">CSS</a>).</p> -<p>SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в <a href="http://caniuse.com/svg">Can I use</a>. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском. К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.</p> +<p>SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в <a href="http://caniuse.com/svg">Can I use</a>. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растёт с каждым новым выпуском. К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.</p> <p>Перед тем как начать, вы должны иметь основное понимание XML или другого языка разметки, такого как <abbr title="HyperText Markup Language">HTML</abbr>. Если вы не очень знакомы с XML, ниже имеются некоторые рекомендации, которые следует иметь ввиду:</p> @@ -32,13 +32,13 @@ original_slug: Web/SVG/Tutorial/Введение <li>Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.</li> </ul> -<p>SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать <a href="/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">Справочник SVG элементов</a> и <a href="/ru/docs/DOM/DOM_Reference#SVG_интерфейсы">SVG интерфейсы</a>, чтобы найти что-либо еще при необходимости.</p> +<p>SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать <a href="/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">Справочник SVG элементов</a> и <a href="/ru/docs/DOM/DOM_Reference#SVG_интерфейсы">SVG интерфейсы</a>, чтобы найти что-либо ещё при необходимости.</p> <h3 id="Особенности_SVG">Особенности SVG</h3> <p>Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. <a href="http://www.w3.org/TR/SVG/">Второй выпуск SVG 1.1</a> стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.</p> -<p>Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.</p> +<p>Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжёлыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.</p> <p>Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.</p> diff --git a/files/ru/web/svg/tutorial/paths/index.html b/files/ru/web/svg/tutorial/paths/index.html index ba35db7a9a..05ddefc879 100644 --- a/files/ru/web/svg/tutorial/paths/index.html +++ b/files/ru/web/svg/tutorial/paths/index.html @@ -19,7 +19,7 @@ translation_of: Web/SVG/Tutorial/Paths <h2 id="Команды_линии">Команды линии</h2> -<p>Существуют пять команд линии для узлов <code><path></code>. Первая команда - это "Переместиться к", или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда "Переместиться к" используется в начале элемента <code><path></code> для указания точки, откуда начнется рисование, например:</p> +<p>Существуют пять команд линии для узлов <code><path></code>. Первая команда - это "Переместиться к", или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда "Переместиться к" используется в начале элемента <code><path></code> для указания точки, откуда начнётся рисование, например:</p> <pre>M x y </pre> @@ -52,7 +52,7 @@ translation_of: Web/SVG/Tutorial/Paths V y (или v dy) </pre> -<p>Начнем с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента <code><rect></code>). Он состоит только из горизонтальных и вертикальных линий<span style="line-height: 1.5;">:</span></p> +<p>Начнём с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента <code><rect></code>). Он состоит только из горизонтальных и вертикальных линий<span style="line-height: 1.5;">:</span></p> <p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> @@ -68,7 +68,7 @@ translation_of: Web/SVG/Tutorial/Paths </svg></pre> -<p>Нашу запись в примере выше можно немного сократить , используя команду "Закрыть путь", <code>Z</code>. Эта команда рисует прямую линию от текущего положения обратно к первой точке пути. Она часто встречается в конце узла пути, хотя и не всегда. Для нее регистр буквы не важен.</p> +<p>Нашу запись в примере выше можно немного сократить , используя команду "Закрыть путь", <code>Z</code>. Эта команда рисует прямую линию от текущего положения обратно к первой точке пути. Она часто встречается в конце узла пути, хотя и не всегда. Для неё регистр буквы не важен.</p> <pre> Z (или z) </pre> @@ -83,13 +83,13 @@ translation_of: Web/SVG/Tutorial/Paths <pre class="brush: xml"> <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> </pre> -<p>Путь начнется от точки (10,10), пойдет горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.</p> +<p>Путь начнётся от точки (10,10), пойдёт горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.</p> <p>Возможно, в этих примерах было бы проще использовать элементы <code><polygon></code> или <code><polyline></code>.<code> </code>Однако, пути используются при рисовании SVG настолько часто, что многим разработчикам может быть удобнее использовать их вместо других элементов. Нет никакой разницы в производительности при использовании того или другого.</p> <h2 id="Команды_кривых_линий">Команды кривых линий</h2> -<p>Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга", или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia</a>. Информации о кривых Безье слишком много, чтобы попытаться охватить ее здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.</p> +<p>Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга", или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia</a>. Информации о кривых Безье слишком много, чтобы попытаться охватить её здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.</p> <h3 id="Кривые_Безье">Кривые Безье</h3> @@ -98,7 +98,7 @@ translation_of: Web/SVG/Tutorial/Paths <pre> C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) </pre> -<p>Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие - контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создает плавную кривую, которая ведет от наклона, который вы установили в начале вашей линии к наклону на другом конце.</p> +<p>Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие - контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создаёт плавную кривую, которая ведёт от наклона, который вы установили в начале вашей линии к наклону на другом конце.</p> <p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> @@ -117,9 +117,9 @@ translation_of: Web/SVG/Tutorial/Paths </svg> </pre> -<p>Пример сверху показывает девять кубических кривых Безье. Чем ближе к левому краю изображения, тем более горизонтально разделенными становятся контрольные точки. Ближе к правому, становятся более отделенными от конечных точек. Стоит отметить, что кривая начинается в направлении первой контрольной точки, а затем изгибается, переходя в направление второй контрольной точки.</p> +<p>Пример сверху показывает девять кубических кривых Безье. Чем ближе к левому краю изображения, тем более горизонтально разделёнными становятся контрольные точки. Ближе к правому, становятся более отделёнными от конечных точек. Стоит отметить, что кривая начинается в направлении первой контрольной точки, а затем изгибается, переходя в направление второй контрольной точки.</p> -<p>Вы можете связать вместе несколько кривых Безье, чтобы создавать более длинные плавные формы. В таком случае часто контрольные точки на разных сторонах будут отображением друг друга (чтобы поддерживать постоянный наклон). В этом случае можно использовать сокращенную запись для кривой Безье, используя команду S (или s).</p> +<p>Вы можете связать вместе несколько кривых Безье, чтобы создавать более длинные плавные формы. В таком случае часто контрольные точки на разных сторонах будут отображением друг друга (чтобы поддерживать постоянный наклон). В этом случае можно использовать сокращённую запись для кривой Безье, используя команду S (или s).</p> <pre> S x2 y2, x y (or s dx2 dy2, dx dy) </pre> @@ -148,7 +148,7 @@ translation_of: Web/SVG/Tutorial/Paths <pre> T x y (or t dx dy) </pre> -<p>Как и ранее, сокращение смотрит на предыдущую контрольную точку, которую вы использовали, и выводит из нее новую. Это означает, что после первой контрольной точки вы можете делать довольно сложные фигуры, указав только конечные точки.</p> +<p>Как и ранее, сокращение смотрит на предыдущую контрольную точку, которую вы использовали, и выводит из неё новую. Это означает, что после первой контрольной точки вы можете делать довольно сложные фигуры, указав только конечные точки.</p> <div class="blockIndicator note"> <p>Обратите внимание, что это работает только в том случае, если предыдущей командой была команда Q или T. Если это не так, то контрольная точка считается той же, что и предыдущая, и вы нарисуете только линии.</p> @@ -229,6 +229,6 @@ translation_of: Web/SVG/Tutorial/Paths <p>Последние два аргумента, если вы ещё не догадались, обозначают координаты x и y, где заканчивается дуга. Дуги - лёгкий способ создавать части кругов или эллипсов в ваших рисунках. Например, круговая диаграмма требует отдельную дугу для каждого куска диаграммы.</p> -<p>Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определен. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (протестировано только в Chrome и Firefox, может не работать в вашем браузере)</p> +<p>Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определён. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (протестировано только в Chrome и Firefox, может не работать в вашем браузере)</p> <p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> diff --git a/files/ru/web/svg/tutorial/patterns/index.html b/files/ru/web/svg/tutorial/patterns/index.html index 4c2e459016..81970ec2f5 100644 --- a/files/ru/web/svg/tutorial/patterns/index.html +++ b/files/ru/web/svg/tutorial/patterns/index.html @@ -7,7 +7,7 @@ translation_of: Web/SVG/Tutorial/Patterns <h2 id="Шаблоны_Patterns">Шаблоны (Patterns)</h2> -<p>Patterns, по моему мнению, одни из самых запутанных типов заполнения (<strong>fill </strong>types) в SVG. Несмотря на это ,они являются очень мощным инструментом, так что о них определенно стоит поговорить и понять хотя бы основные части. Как и градиенты, элементы {{SVGElement('pattern')}} должны быть помещены в секцию <code><defs> в Вашем SVG-файле.</code></p> +<p>Patterns, по моему мнению, одни из самых запутанных типов заполнения (<strong>fill </strong>types) в SVG. Несмотря на это ,они являются очень мощным инструментом, так что о них определённо стоит поговорить и понять хотя бы основные части. Как и градиенты, элементы {{SVGElement('pattern')}} должны быть помещены в секцию <code><defs> в Вашем SVG-файле.</code></p> <pre class="brush: html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> @@ -40,12 +40,12 @@ translation_of: Web/SVG/Tutorial/Patterns <p>В отличие от градиентов, у паттернов есть 2ой атрибут - <code><strong>patternContentUnits</strong>, </code>который описывает единицы измерения, используемые в базовых фигурах внутри элемента <strong>pattern</strong>. Дефолтное значение для этого атрибута - <strong>userSpaceOnUse</strong>, противоположность атрибуту <code><strong>patternUnits</strong>. </code>Это означает, что если Вы не укажете один или оба этих атрибута (<strong><code>patternContentUnits</code> </strong>и/или <strong><code>patternUnits</code></strong>), фигуры, которые Вы будете рисовать внутри блока <<strong>pattern></strong>, будут отрисованы в другой системе координат (отличной от той, которую использует паттерн). Это может немного запутывать, если Вы пишете код вручную.</p> -<p>Чтобы сделать эту работу в приведенном выше примере, нам пришлось рассмотреть размер нашей коробки (200 пикселей) и тот факт, что мы хотели, чтобы рисунок повторялся 4 раза по горизонтали и по вертикали. Это означает, что каждый блок шаблонов был квадратом 50 × 50. Затем два прямоугольника и круг внутри рисунка были рассчитаны на размер в коробке 50x50.<br> - Все, что мы нарисовали вне этой коробки, не было бы показано. Шаблон также должен был быть смещен на 10 пикселей, чтобы он начинался в верхнем левом углу нашего окна, поэтому атрибуты <strong>x</strong> и <strong>y</strong> шаблона должны были быть скорректированы до 10/200 = 0,05.</p> +<p>Чтобы сделать эту работу в приведённом выше примере, нам пришлось рассмотреть размер нашей коробки (200 пикселей) и тот факт, что мы хотели, чтобы рисунок повторялся 4 раза по горизонтали и по вертикали. Это означает, что каждый блок шаблонов был квадратом 50 × 50. Затем два прямоугольника и круг внутри рисунка были рассчитаны на размер в коробке 50x50.<br> + Все, что мы нарисовали вне этой коробки, не было бы показано. Шаблон также должен был быть смещён на 10 пикселей, чтобы он начинался в верхнем левом углу нашего окна, поэтому атрибуты <strong>x</strong> и <strong>y</strong> шаблона должны были быть скорректированы до 10/200 = 0,05.</p> -<p>Здесь предостережение заключается в том, что если объект изменяет размер, сам шаблон будет масштабироваться, чтобы соответствовать ему, но объекты внутри не будут. Таким образом, хотя у нас все еще будет 4 повторяющихся блока внутри шаблона, объекты, составляющие этот шаблон, будут оставаться одного и того же размера, и вы окажетесь в больших областях между ними.<br> +<p>Здесь предостережение заключается в том, что если объект изменяет размер, сам шаблон будет масштабироваться, чтобы соответствовать ему, но объекты внутри не будут. Таким образом, хотя у нас все ещё будет 4 повторяющихся блока внутри шаблона, объекты, составляющие этот шаблон, будут оставаться одного и того же размера, и вы окажетесь в больших областях между ними.<br> Изменяя атрибут <strong><code>patternContentUnits</code></strong> , мы можем поместить все элементы в одну единую систему:</p> <pre class="brush: xml"> <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> @@ -55,7 +55,7 @@ translation_of: Web/SVG/Tutorial/Patterns </pattern> </pre> -<p>Теперь, поскольку содержимое шаблона находится в той же единичной системе, что и шаблон, нам не нужно смещать поле так, чтобы шаблон начинался в правильном месте, и если размер объекта был изменен на более крупный, шаблон автоматически масштабируется так, чтобы в нем было одинаковое количество объектов, повторяющихся внутри него. Это контрастирует с системой <strong>userSpaceOnUse</strong>, где, если объект изменяет размер, шаблон останется прежним и просто повторится больше раз, чтобы заполнить поле.</p> +<p>Теперь, поскольку содержимое шаблона находится в той же единичной системе, что и шаблон, нам не нужно смещать поле так, чтобы шаблон начинался в правильном месте, и если размер объекта был изменён на более крупный, шаблон автоматически масштабируется так, чтобы в нем было одинаковое количество объектов, повторяющихся внутри него. Это контрастирует с системой <strong>userSpaceOnUse</strong>, где, если объект изменяет размер, шаблон останется прежним и просто повторится больше раз, чтобы заполнить поле.</p> <p>Как ни удивительно, но в кругах Gecko, похоже, есть проблемы с рисованием, если их радиус установлен на что-то меньшее 0.075 (хотя их нужно масштабировать, чтобы иметь гораздо больший радиус, чем этот. Это может быть ошибкой только в шаблоне , Или вообще не ошибка, я не уверен).<br> Чтобы обойти это, вероятно, лучше всего избегать рисования блоков «objectBoundingBox», если вам это не нужно.</p> @@ -69,7 +69,7 @@ translation_of: Web/SVG/Tutorial/Patterns </pattern> </pre> -<p>Конечно, это означает, что шаблон не будет масштабироваться, если вы позже измените размер своего объекта. Все три из приведенных выше примеров показаны ниже на прямоугольнике, который слегка удлинен до высоты 300 пикселей, но я должен отметить его не исчерпывающее изображение, и есть другие варианты, доступные в зависимости от вашего приложения.</p> +<p>Конечно, это означает, что шаблон не будет масштабироваться, если вы позже измените размер своего объекта. Все три из приведённых выше примеров показаны ниже на прямоугольнике, который слегка удлинён до высоты 300 пикселей, но я должен отметить его не исчерпывающее изображение, и есть другие варианты, доступные в зависимости от вашего приложения.</p> <p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p> diff --git a/files/ru/web/svg/tutorial/svg_and_css/index.html b/files/ru/web/svg/tutorial/svg_and_css/index.html index 7bdadb6b12..1382c844c6 100644 --- a/files/ru/web/svg/tutorial/svg_and_css/index.html +++ b/files/ru/web/svg/tutorial/svg_and_css/index.html @@ -29,7 +29,7 @@ original_slug: Web/Guide/CSS/Getting_started/SVG_и_CSS <tbody> <tr> <td> - <p>На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a>, либо в таблицах совместимости <a href="/en-US/docs/SVG/Element">SVG element reference</a>, для информации о поддержке отдельных элементов.</p> + <p>На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определённых браузерах. Для более подробной информации о текущей поддержке SVG, см. <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a>, либо в таблицах совместимости <a href="/en-US/docs/SVG/Element">SVG element reference</a>, для информации о поддержке отдельных элементов.</p> <p>В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p> diff --git a/files/ru/web/svg/tutorial/svg_fonts/index.html b/files/ru/web/svg/tutorial/svg_fonts/index.html index 92cdb57f84..42aba5fd39 100644 --- a/files/ru/web/svg/tutorial/svg_fonts/index.html +++ b/files/ru/web/svg/tutorial/svg_fonts/index.html @@ -5,11 +5,11 @@ translation_of: Web/SVG/Tutorial/SVG_fonts --- <p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> -<p>Когда был написан стандарт SVG, поддержка веб-шрифтов еще не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.<br> +<p>Когда был написан стандарт SVG, поддержка веб-шрифтов ещё не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.<br> </p> <p class="note"><strong>SVG-шрифты корректно поддерживаются только в Safari.</strong><br> - Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25), разработчики Mozilla отложили ее реализацию на неопределенное время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.</p> + Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25), разработчики Mozilla отложили её реализацию на неопределённое время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.</p> <p class="syntaxbox">Элемент {{ SVGElement("font") }} используется для определения SVG-шрифта.</p> @@ -36,17 +36,17 @@ translation_of: Web/SVG/Tutorial/SVG_fonts </font> </pre> -<p>Начнем с элемента {{ SVGElement("font") }}. Он имеет атрибут <code>id</code>, который позволяет ему ссылаться через URI (см. ниже). Атрибут <code>horiz-adv-x</code> определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки. </p> +<p>Начнём с элемента {{ SVGElement("font") }}. Он имеет атрибут <code>id</code>, который позволяет ему ссылаться через URI (см. ниже). Атрибут <code>horiz-adv-x</code> определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки. </p> -<p>Элемент {{ SVGElement("font-face") }} является в SVG эквивалентом объявления шрифта с помощью CSS-свойства <a href="https://developer.mozilla.org/en/CSS/@font-face">@font-face</a>. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведенном выше примере, первое и самое важное свойство, которое должно быть определено - это <code>font-family</code>, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты <code>font-weight</code> и <code>font-style</code> имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз <a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">выносных элементов</a>.</p> +<p>Элемент {{ SVGElement("font-face") }} является в SVG эквивалентом объявления шрифта с помощью CSS-свойства <a href="https://developer.mozilla.org/en/CSS/@font-face">@font-face</a>. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведённом выше примере, первое и самое важное свойство, которое должно быть определено - это <code>font-family</code>, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты <code>font-weight</code> и <code>font-style</code> имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз <a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">выносных элементов</a>.</p> -<p>Дочерний элемент {{ SVGElement("font-face-src") }} соответствует свойству <code>src</code> для атрибута <code>@font-face</code> в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов {{ SVGElement("font-face-name") }} и {{ SVGElement("font-face-uri") }}. В приведенном выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.</p> +<p>Дочерний элемент {{ SVGElement("font-face-src") }} соответствует свойству <code>src</code> для атрибута <code>@font-face</code> в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов {{ SVGElement("font-face-name") }} и {{ SVGElement("font-face-uri") }}. В приведённом выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.</p> <p>Следующий элемент за {{ SVGElement("font-face-src") }} - это {{ SVGElement("missing-glyph") }}. Он определяет, что должно отображаться, если символ в шрифте не был найден и если нет запасного варианта. Он также показывает, как создаются глифы: добавлением в него любого графического контента SVG. В нем вы можете использовать буквально любые элементы SVG, даже {{ SVGElement("filter") }}, {{ SVGElement("a") }} или {{ SVGElement("script") }}. Однако для простых глифов вы можете просто добавить атрибут <code>d</code> - он определяет форму для глифа точно так же, как работают стандартные пути SVG.</p> -<p>Сами глифы затем определяются элементами {{ SVGElement("glyph") }}. Наиболее важным атрибутом является <code>unicode</code>. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут {{htmlattrxref("lang")}} на глифе, вы можете дополнительно ограничить его определенными языками (представленными <code>xml:lang</code>). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.<br> +<p>Сами глифы затем определяются элементами {{ SVGElement("glyph") }}. Наиболее важным атрибутом является <code>unicode</code>. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут {{htmlattrxref("lang")}} на глифе, вы можете дополнительно ограничить его определёнными языками (представленными <code>xml:lang</code>). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.<br> <br> - Есть еще два элемента, которые могут быть определены внутри шрифта: {{ SVGElement("hkern") }} и {{ SVGElement("vkern") }}. Каждый из них содержит ссылки не менее чем на два символа (атрибуты <code>u1</code> и <code>u2</code>) и атрибут <code>k</code>, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.</p> + Есть ещё два элемента, которые могут быть определены внутри шрифта: {{ SVGElement("hkern") }} и {{ SVGElement("vkern") }}. Каждый из них содержит ссылки не менее чем на два символа (атрибуты <code>u1</code> и <code>u2</code>) и атрибут <code>k</code>, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.</p> <pre><hkern u1="A" u2="V" k="20" /> </pre> diff --git a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html index 7f993c7bf8..a897157fb4 100644 --- a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html +++ b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html @@ -55,7 +55,7 @@ translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction <h2 id="Discussion" name="Discussion">Примечание</h2> -<p>В примере представлен обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имен SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введет что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.</p> +<p>В примере представлен обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имён SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введёт что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.</p> <p>Такой способ имеет следующие пункты в свою пользу:</p> @@ -98,7 +98,7 @@ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); <p><code>slice </code>- тоже сохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместилась в область</p> -<p>Также есть спецификатор <code>none который означает, что изображение заполнит область путем масштабирования сторон, не сохраняя пропорции (растянет).</code></p> +<p>Также есть спецификатор <code>none который означает, что изображение заполнит область путём масштабирования сторон, не сохраняя пропорции (растянет).</code></p> <pre class="brush: html"> preserveAspectRatio="none"</pre> @@ -109,7 +109,7 @@ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); <ul> <li>Сохранение пропорций <a href="http://xiper.net/learn/svg/svg-essentials/preserving-aspect-ratio">ссылка</a></li> <li>Масштабирование и сдвиг <a href="https://msdn.microsoft.com/ru-ru/library/gg589508(v=vs.85).aspx">msdn.microsoft</a></li> - <li>Еще SVG в XHTML: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">пример</a></li> + <li>Ещё SVG в XHTML: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">пример</a></li> </ul> <p> </p> diff --git a/files/ru/web/svg/tutorial/texts/index.html b/files/ru/web/svg/tutorial/texts/index.html index 1083b55a4d..a4e0a76305 100644 --- a/files/ru/web/svg/tutorial/texts/index.html +++ b/files/ru/web/svg/tutorial/texts/index.html @@ -38,22 +38,22 @@ translation_of: Web/SVG/Tutorial/Texts <p>Элемент <code>tspan</code> имеет следующие атрибуты:<br> <br> <strong>x</strong><br> - Задает новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по умолчанию позицию. Атрибут может также содержать набор чисел, которые поочередно применяются к каждому символу <code>tspan</code>.</p> + Задаёт новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по умолчанию позицию. Атрибут может также содержать набор чисел, которые поочерёдно применяются к каждому символу <code>tspan</code>.</p> <p><strong>dx</strong><br> - Задает смещение по горизонтали <code>dx</code> относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.</p> + Задаёт смещение по горизонтали <code>dx</code> относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.</p> <p>Аналогично, для вертикального перемещения текста имеются <strong>y</strong> и <strong>dy</strong> атрибуты.<br> <br> <strong>rotate</strong><br> - Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочередно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.<br> + Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочерёдно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.<br> <br> <strong>textLength</strong><br> - Атрибут строго задает длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.</p> + Атрибут строго задаёт длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.</p> <h3 id="tref">tref</h3> -<p>Элемент <code>tref</code> позволяет ссылаться на уже существующий текст, эффективно копируя его на свое место. Вы можете использовать атрибут <code>xlink:href</code> чтобы указать на элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника. </p> +<p>Элемент <code>tref</code> позволяет ссылаться на уже существующий текст, эффективно копируя его на своё место. Вы можете использовать атрибут <code>xlink:href</code> чтобы указать на элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника. </p> <pre class="brush:xml"><text id="example">This is an example text.</text> diff --git a/files/ru/web/svg/tutorial/tools_for_svg/index.html b/files/ru/web/svg/tutorial/tools_for_svg/index.html index 97a63678a3..3962c6a5fe 100644 --- a/files/ru/web/svg/tutorial/tools_for_svg/index.html +++ b/files/ru/web/svg/tutorial/tools_for_svg/index.html @@ -17,7 +17,7 @@ translation_of: Web/SVG/Tutorial/Tools_for_SVG <p>Очень важно иметь в инструментарии приличную графическую программу. Inkscape предлагает современную векторную графику с открытым исходным кодом.</p> -<p>Кроме того, SVG является ее родным форматом. Для хранения специфичных для Inkscape данных, файл SVG расширяется элементами и атрибутами в пользовательском пространстве имен, что не мешает выбрать экспорт и в виде простого SVG.</p> +<p>Кроме того, SVG является её родным форматом. Для хранения специфичных для Inkscape данных, файл SVG расширяется элементами и атрибутами в пользовательском пространстве имён, что не мешает выбрать экспорт и в виде простого SVG.</p> <h2 id="Adobe_Illustrator">Adobe Illustrator</h2> |