diff options
Diffstat (limited to 'files/ru/web/svg/tutorial')
15 files changed, 66 insertions, 66 deletions
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> |