diff options
author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-10-27 02:31:24 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-27 02:31:24 +0300 |
commit | 980fe00a74a9ad013b945755415ace2e5429c3c2 (patch) | |
tree | a1c6bb4b302e69bfa53eab13e44500eba55d1696 /files/ru/web/svg/tutorial | |
parent | 374a039b97a11ee7306539d16aaab27fed66b398 (diff) | |
download | translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.gz translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.bz2 translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.zip |
[RU] Remove notranslate (#2874)
Diffstat (limited to 'files/ru/web/svg/tutorial')
-rw-r--r-- | files/ru/web/svg/tutorial/basic_transformations/index.html | 10 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/gradients/index.html | 16 |
2 files changed, 13 insertions, 13 deletions
diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html index 4523cbace6..f79f805d60 100644 --- a/files/ru/web/svg/tutorial/basic_transformations/index.html +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html @@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с {{SVGElement("g")}} элементом. С его помощью вы можете назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель. Например:</p> <div id="two_blocks"> -<pre class="brush: html notranslate"><svg width="30" height="10"> +<pre class="brush: html"><svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> @@ -26,7 +26,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определённым атрибутам. Для этого используется <code>translate()</code>.</p> -<pre class="brush: html notranslate"><svg width="40" height="50" style="background-color:#bff;"> +<pre class="brush: html"><svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> </pre> @@ -41,7 +41,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>Вращение элементов - это достаточно типичная задача. Используйте <code>rotate()</code> для этого:</p> -<pre class="brush: html notranslate"><svg width="31" height="31"> +<pre class="brush: html"><svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg> </pre> @@ -70,7 +70,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повёрнуты, перемещены и смаштабированы в соответствии с преобразованиями.</p> -<pre class="brush: html notranslate"><svg width="100" height="100"> +<pre class="brush: html"><svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> @@ -85,7 +85,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>В отличие от HTML, SVG позволяет встраивать другие <code>svg</code> элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя <code>viewBox</code>, <code>width</code> и<code>height</code> внутреннего <code>svg</code> элемента.</p> -<pre class="brush: html notranslate"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> +<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <svg width="100" height="100" viewBox="0 0 50 50"> <rect width="50" height="50" /> </svg> diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html index d125016c73..76d965fc45 100644 --- a/files/ru/web/svg/tutorial/gradients/index.html +++ b/files/ru/web/svg/tutorial/gradients/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="Basic_example">Basic example</h3> -<pre class="brush: html notranslate"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> @@ -44,20 +44,20 @@ translation_of: Web/SVG/Tutorial/Gradients <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 class="eval"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> </pre> <p>Чтобы использовать градиент, мы должны сослаться на него из атрибутов объекта <code>fill/stroke</code>. Это делается таким же образом, как вы ссылаетесь на элементы в CSS, используя <code>url</code>. В этом случае, url - это просто ссылка на наш градиент, которому задан уникальный ID, "<em>Gradient". </em>Чтобы добавить его, установим <code>fill="url(#Gradient)"</code>. Наш объект теперь многоцветный. То же самое можно сделать с атрибутом <code>stroke</code>.</p> <p>Элемент <code><linearGradient></code> также принимает некоторые другие атрибуты, который определяют размер и внешний вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами <code>x1, x2, y1, y2</code>. Эти атрибуты определяют линию, вдоль которой двигается градиент. По умолчанию градиент имеет горизонтальную ориентацию, но это может быть изменено с помощью этих атрибутов. Gradient2 в примере выше предназначен для создания вертикального градиента.</p> -<pre class="eval notranslate"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> +<pre class="eval"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> </pre> <div class="note"> <p><strong>Замечание: </strong>Вы также можете использовать атрибут <code>xlink:href </code>для градиентов. Когда он использован, атрибуты и стопы из одного градиента могут быть включены в другой. В примере выше можно было бы не пересоздавать все точки остановки в Gradient2<strong>.</strong></p> -<pre class="eval notranslate"> <linearGradient id="Gradient1"> +<pre class="eval"> <linearGradient id="Gradient1"> <stop id="stop1" offset="0%"/> <stop id="stop2" offset="50%"/> <stop id="stop3" offset="100%"/> @@ -75,7 +75,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="Basic_example_2">Basic example</h3> -<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> +<pre class="brush: html"><?xml version="1.0" standalone="no"?> <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="RadialGradient1"> @@ -101,7 +101,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="Center_and_focal_point">Center and focal point</h3> -<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> +<pre class="brush: html"><?xml version="1.0" standalone="no"?> <svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg"> @@ -132,7 +132,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="spreadMethod">spreadMethod</h3> -<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> +<pre class="brush: html"><?xml version="1.0" standalone="no"?> <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> @@ -170,7 +170,7 @@ translation_of: Web/SVG/Tutorial/Gradients <p>У обоих типов градиентов также есть атрибут <code><strong>gradientUnits</strong></code>, который описывает систему измерений, которую вы собираетесь использовать, когда описываете размеры или ориентацию или градиент. Данный атрибут принимает 2 возможных значения: <strong><code>userSpaceOnUse</code></strong><code> </code>или <strong><code>objectBoundingBox </code></strong>(дефолтное, показывалось во всех примерах выше). <strong><code>objectBoundingBox </code></strong>автоматически адаптирует градиент к размеру объекта, так что вы можете указать координаты в виде значений от 0 до 1, и браузер автоматически их отпозиционирует. <strong><code>userSpaceOnUse </code></strong>позиционирует градиент в абсолютных единицах измерения, так что вам необходимо знать где находится целевой объект, чтобы правильно применить к нему градиент. radialGradient выше может быть переписан:</p> -<pre class="eval notranslate"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> +<pre class="eval"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> </pre> <p>Вы также можете применить иную трансформацию к градиенту, используя атрибут <strong><code>gradientTransform</code></strong>, но мы пока что <a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">его не изучали</a>, я оставлю это на потом.<br> |