diff options
Diffstat (limited to 'files/ru/web/svg')
28 files changed, 66 insertions, 66 deletions
diff --git a/files/ru/web/svg/attribute/attributename/index.html b/files/ru/web/svg/attribute/attributename/index.html index 3d92329781..4c7d498f3a 100644 --- a/files/ru/web/svg/attribute/attributename/index.html +++ b/files/ru/web/svg/attribute/attributename/index.html @@ -11,7 +11,7 @@ translation_of: Web/SVG/Attribute/attributeName <p>Атрибут <code><strong>attributeName</strong></code> задаёт имя свойства CSS или атрибута целевого элемента, которое будет изменено во время анимации.</p> -<p>Четыре элемента используют данный артибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateTransform")}} и {{SVGElement("set")}}</p> +<p>Четыре элемента используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateTransform")}} и {{SVGElement("set")}}</p> <div id="topExample"> <div class="hidden"> @@ -54,7 +54,7 @@ translation_of: Web/SVG/Attribute/attributeName <dd>Это значение задаёт имя свойства CSS или атрибута целевого элемента, которое будет анимировано.</dd> </dl> -<h2 id="Спецификиции">Спецификиции</h2> +<h2 id="Спецификации">Спецификации</h2> <table class="standard-table"> <thead> diff --git a/files/ru/web/svg/attribute/class/index.html b/files/ru/web/svg/attribute/class/index.html index 622423f521..e05901cdb3 100644 --- a/files/ru/web/svg/attribute/class/index.html +++ b/files/ru/web/svg/attribute/class/index.html @@ -3,9 +3,9 @@ title: class slug: Web/SVG/Attribute/class translation_of: Web/SVG/Attribute/class --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Домашняя страница справочника по SVG аттрибутам</a></p> +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Домашняя страница справочника по SVG атрибутам</a></p> -<p>Присвоение класса или набора классов элементу. Вы можете присовить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".</p> +<p>Присвоение класса или набора классов элементу. Вы можете присвоить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".</p> <p>Класс элемента имеет 2 ключевые роли:</p> @@ -70,7 +70,7 @@ translation_of: Web/SVG/Attribute/class <h2 id="Элементы">Элементы</h2> -<p>В следующих элементах допустимо использовать аттрибут <code>class</code></p> +<p>В следующих элементах допустимо использовать атрибут <code>class</code></p> <p>:{{ SVGElement("a") }}</p> diff --git a/files/ru/web/svg/attribute/cx/index.html b/files/ru/web/svg/attribute/cx/index.html index 6e7c22c089..939e02a067 100644 --- a/files/ru/web/svg/attribute/cx/index.html +++ b/files/ru/web/svg/attribute/cx/index.html @@ -10,7 +10,7 @@ translation_of: Web/SVG/Attribute/cx <p>Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси x. Если атрибут не определён, то эффект такой, как если бы было указано значение "0".</p> -<p>Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату x набольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента <strong>100%</strong> соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение <strong>50%</strong>.</p> +<p>Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату x небольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента <strong>100%</strong> соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение <strong>50%</strong>.</p> <h2 id="Контекст_использования">Контекст использования</h2> diff --git a/files/ru/web/svg/attribute/cy/index.html b/files/ru/web/svg/attribute/cy/index.html index d4b51c5f9b..4a85d14b35 100644 --- a/files/ru/web/svg/attribute/cy/index.html +++ b/files/ru/web/svg/attribute/cy/index.html @@ -10,7 +10,7 @@ translation_of: Web/SVG/Attribute/cy <p>Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси y. Если атрибут не определён, то эффект такой, как если бы было указано значение "0".</p> -<p>Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату y набольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента <strong>100%</strong> соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение <strong>50%</strong>.</p> +<p>Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату y небольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента <strong>100%</strong> соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение <strong>50%</strong>.</p> <h2 id="Контекст_использования">Контекст использования</h2> diff --git a/files/ru/web/svg/attribute/keytimes/index.html b/files/ru/web/svg/attribute/keytimes/index.html index 4df57edc2c..d1db1c495f 100644 --- a/files/ru/web/svg/attribute/keytimes/index.html +++ b/files/ru/web/svg/attribute/keytimes/index.html @@ -20,7 +20,7 @@ translation_of: Web/SVG/Attribute/keyTimes <p>Если в качестве режима интерполяции используется <em>paced</em>, атрибут <code>keyTimes </code>игнорируется.</p> -<p>Если в качетсве параметра длительности выбрано <em>indefinite</em>, атрибут <code>keyTimes</code> игнорируется.</p> +<p>Если в качестве параметра длительности выбрано <em>indefinite</em>, атрибут <code>keyTimes</code> игнорируется.</p> <h2 id="Usage_context">Usage context</h2> diff --git a/files/ru/web/svg/attribute/overflow/index.html b/files/ru/web/svg/attribute/overflow/index.html index 46449f0919..1c18f2e3b4 100644 --- a/files/ru/web/svg/attribute/overflow/index.html +++ b/files/ru/web/svg/attribute/overflow/index.html @@ -17,7 +17,7 @@ translation_of: Web/SVG/Attribute/overflow <li>Внутри SVG-содержимого значение <code>auto</code> эквивалентно значению <code>visible</code>.</li> <li>Когда svg-элемент высшего уровня включён в HTML-код, если атрибут <code>overflow</code> имеет значение <code>hidden</code> или <code>scroll</code>, браузер установит первоначальный путь обрезки равным границам первоначального порта просмотра; иначе первоначальный порт просмотра задаётся соответственно CSS-правилам обрезки.</li> <li>Когда svg-элемент высшего уровня автономен, атрибут <code>overflow</code> на нём игнорируется в том, что касается отрисовки, а первоначальный путь обрезки устанавливается по границам первоначального порта просмотра.</li> - <li>Первоначальное значение <code>overflow</code>, как определено вn CSS, есть <code>visible</code>, и это применяется также к корневому элементу {{ SVGElement("svg") }}; но для дочерних элементов SVG-документа браузерные стили SVG перекрывают это первоначальное значение и задают атрибуту <code>overflow</code> элементов, устанавливающих новый порт просмотра, элементов <code>pattern</code> и <code>marker</code> значение <code>hidden</code>.</li> + <li>Первоначальное значение <code>overflow</code>, как определено в CSS, есть <code>visible</code>, и это применяется также к корневому элементу {{ SVGElement("svg") }}; но для дочерних элементов SVG-документа браузерные стили SVG перекрывают это первоначальное значение и задают атрибуту <code>overflow</code> элементов, устанавливающих новый порт просмотра, элементов <code>pattern</code> и <code>marker</code> значение <code>hidden</code>.</li> </ul> <p>Будучи презентационным этот атрибут может также быть использован как свойство прямо в CSS-стилях, подробнее см. {{ cssxref("overflow","CSS overflow") }}.</p> diff --git a/files/ru/web/svg/attribute/patterncontentunits/index.html b/files/ru/web/svg/attribute/patterncontentunits/index.html index a47a9e4480..5a9258a1f4 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> diff --git a/files/ru/web/svg/attribute/shape-rendering/index.html b/files/ru/web/svg/attribute/shape-rendering/index.html index 2c226ef3bd..9110b8ce42 100644 --- a/files/ru/web/svg/attribute/shape-rendering/index.html +++ b/files/ru/web/svg/attribute/shape-rendering/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Attribute/shape-rendering --- <p>« <a href="/ru/docs/Web/SVG/Attribute" title="/ru/docs/Web/SVG/Attribute">Справочник SVG атрибутов</a></p> -<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. <code>shape-rendering</code> предоставляет возможность указывать даные рекомендации.</p> +<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. <code>shape-rendering</code> предоставляет возможность указывать данные рекомендации.</p> <h2 id="Контекст_использования">Контекст использования</h2> @@ -32,7 +32,7 @@ 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> <dt>crispEdges</dt> diff --git a/files/ru/web/svg/attribute/text-anchor/index.html b/files/ru/web/svg/attribute/text-anchor/index.html index 4a034cfde2..9ffcbe7be3 100644 --- a/files/ru/web/svg/attribute/text-anchor/index.html +++ b/files/ru/web/svg/attribute/text-anchor/index.html @@ -3,7 +3,7 @@ title: text-anchor slug: Web/SVG/Attribute/text-anchor translation_of: Web/SVG/Attribute/text-anchor --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Справочник SVG Аттрибутов</a></p> +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Справочник SVG Атрибутов</a></p> <p>Атрибут <code>text-anchor</code> используется для выравнивания<br> <em>(start-, middle- или end-выравнивание)</em> текстовой строки относительно заданной точки.</p> @@ -38,7 +38,7 @@ translation_of: Web/SVG/Attribute/text-anchor <dl> <dt>start</dt> <dd> - <p>Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиаского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.</p> + <p>Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиатского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.</p> </dd> <dt>middle</dt> <dd> @@ -47,8 +47,8 @@ translation_of: Web/SVG/Attribute/text-anchor позиции.)</p> </dd> <dt>end</dt> - <dd>Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалетно<br> - правому выраниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.</dd> + <dd>Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалентно<br> + правому выравниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.</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> diff --git a/files/ru/web/svg/attribute/text-rendering/index.html b/files/ru/web/svg/attribute/text-rendering/index.html index 4b89ee483b..e987f821dd 100644 --- a/files/ru/web/svg/attribute/text-rendering/index.html +++ b/files/ru/web/svg/attribute/text-rendering/index.html @@ -4,8 +4,8 @@ slug: Web/SVG/Attribute/text-rendering translation_of: Web/SVG/Attribute/text-rendering --- <p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> -<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. <code>text-rendering</code> предоставляет возможность указывать даные рекомендации.</p> -<p>Помимо presentation attribute, настройки ренедеринга шрифтов можно задавть через CSS стили. Для получения дополнительной информации смотри {{ cssxref("text-rendering","CSS text-rendering") }}.</p> +<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. <code>text-rendering</code> предоставляет возможность указывать данные рекомендации.</p> +<p>Помимо presentation attribute, настройки ренедеринга шрифтов можно задать через CSS стили. Для получения дополнительной информации смотри {{ cssxref("text-rendering","CSS text-rendering") }}.</p> <h2 id="Usage_context">Usage context</h2> <table class="standard-table"> <tbody> @@ -31,7 +31,7 @@ translation_of: Web/SVG/Attribute/text-rendering <dt> auto</dt> <dd> - Указывает на то, что браузер должен внести соответствующие компромисы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.</dd> + Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.</dd> <dt> optimizeSpeed</dt> <dd> diff --git a/files/ru/web/svg/attribute/viewbox/index.html b/files/ru/web/svg/attribute/viewbox/index.html index ed94188d1f..1433367c9d 100644 --- a/files/ru/web/svg/attribute/viewbox/index.html +++ b/files/ru/web/svg/attribute/viewbox/index.html @@ -102,7 +102,7 @@ svg:not(:root) { <h2 id="pattern">pattern</h2> -<p>Для элемента {{SVGElement('pattern')}}, <code>viewBox</code> определеяет расположение и размеры содержимого шаблона.</p> +<p>Для элемента {{SVGElement('pattern')}}, <code>viewBox</code> определяет расположение и размеры содержимого шаблона.</p> <table class="standard-table"> <tbody> diff --git a/files/ru/web/svg/attribute/width/index.html b/files/ru/web/svg/attribute/width/index.html index 30e0e0df21..96fbfeacf0 100644 --- a/files/ru/web/svg/attribute/width/index.html +++ b/files/ru/web/svg/attribute/width/index.html @@ -473,12 +473,12 @@ translation_of: Web/SVG/Attribute/width <h2 id="pattern">pattern</h2> -<p>Для {{SVGElement('pattern')}}, <code>width</code> определяет горизонтальный размер мастящегося паттерна. Точный эффект этого атрибута зависит от атрибутов {{SVGAttr('patternUnits')}} и {{SVGAttr('patternTransform')}}.</p> +<p>Для {{SVGElement('pattern')}}, <code>width</code> определяет горизонтальный размер мостящегося паттерна. Точный эффект этого атрибута зависит от атрибутов {{SVGAttr('patternUnits')}} и {{SVGAttr('patternTransform')}}.</p> <table class="standard-table"> <tbody> <tr> - <th scope="row">Значание</th> + <th scope="row">Значение</th> <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> </tr> <tr> @@ -504,7 +504,7 @@ translation_of: Web/SVG/Attribute/width </tr> <tr> <th scope="row">По умолчанию</th> - <td><code>auto</code> (пассматривается как <code>0</code>)</td> + <td><code>auto</code> (рассматривается как <code>0</code>)</td> </tr> <tr> <th scope="row">Animatable</th> @@ -561,7 +561,7 @@ translation_of: Web/SVG/Attribute/width </tbody> </table> -<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для использоавнных элементов.</p> +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для использованных элементов.</p> <h2 id="Спецификации">Спецификации</h2> @@ -570,7 +570,7 @@ translation_of: Web/SVG/Attribute/width <tr> <th scope="col">Спецификация</th> <th scope="col">Статус</th> - <th scope="col">Комментаий</th> + <th scope="col">Комментарий</th> </tr> </thead> <tbody> diff --git a/files/ru/web/svg/element/a/index.html b/files/ru/web/svg/element/a/index.html index 18d58bdda2..9a39e9b723 100644 --- a/files/ru/web/svg/element/a/index.html +++ b/files/ru/web/svg/element/a/index.html @@ -92,7 +92,7 @@ svg|a:hover, svg|a:active { <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Значение по умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> </dl> -<h3 id="Глобальные_аттрибуты">Глобальные аттрибуты</h3> +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> <dl> <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> @@ -133,7 +133,7 @@ svg|a:hover, svg|a:active { <tr> <td>{{SpecName("SVG2", "linking.html#Links", "<a>")}}</td> <td>{{Spec2("SVG2")}}</td> - <td>Аттрибут {{SVGAttr("xlink:href")}} заменён на {{SVGAttr("href")}}</td> + <td>Атрибут {{SVGAttr("xlink:href")}} заменён на {{SVGAttr("href")}}</td> </tr> <tr> <td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</td> diff --git a/files/ru/web/svg/element/ellipse/index.html b/files/ru/web/svg/element/ellipse/index.html index 332d9abe94..7aeb7f8ea3 100644 --- a/files/ru/web/svg/element/ellipse/index.html +++ b/files/ru/web/svg/element/ellipse/index.html @@ -47,7 +47,7 @@ original_slug: Web/SVG/Элемент/ellipse <small><em>Тип значения</em>: <code>auto</code>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Значение по умолчанию</em>: <code>auto</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> <dt>{{SVGAttr("pathLength")}}</dt> <dd>Этот атрибут позволяет установить длину всего пути.<br> - <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчани</em>: <em>нет</em>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <em>нет</em>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> <dd> @@ -63,7 +63,7 @@ original_slug: Web/SVG/Элемент/ellipse <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Условные атрибуты</a></dt> <dd><small>Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt>Аттрибуты событий</dt> + <dt>Атрибуты событий</dt> <dd><small><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Глобальные атрибуты событий</a>, <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd> <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Атрибуты представления</a></dt> <dd><small>Самые важные: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> diff --git a/files/ru/web/svg/element/g/index.html b/files/ru/web/svg/element/g/index.html index dca6a5d04c..783c2c7729 100644 --- a/files/ru/web/svg/element/g/index.html +++ b/files/ru/web/svg/element/g/index.html @@ -51,7 +51,7 @@ original_slug: Web/SVG/Элемент/g <h2 id="Интерфейс_DOM">Интерфейс DOM</h2> -<p>Этот элемент реализует <code><a href="/en-US/docs/DOM/SVGGElement">SVGGElement</a></code> интерейс.</p> +<p>Этот элемент реализует <code><a href="/en-US/docs/DOM/SVGGElement">SVGGElement</a></code> интерес.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/svg/element/line/index.html b/files/ru/web/svg/element/line/index.html index 4b25c44bc3..33c19eed7b 100644 --- a/files/ru/web/svg/element/line/index.html +++ b/files/ru/web/svg/element/line/index.html @@ -30,19 +30,19 @@ original_slug: Web/SVG/Элемент/line <dl> <dt>{{SVGAttr('x1')}}</dt> <dd>Определяет координату начальной точки линии по оси x .<br> - <small><em>Тип значения:</em> <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <small><em>Тип значения:</em> <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>неминуемый</em>: <strong>да</strong></small></dd> <dt>{{SVGAttr('x2')}}</dt> <dd>Определяет координату конечной точки линии по оси x.<br> - <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>неминуемый</em>: <strong>да</strong></small></dd> <dt>{{SVGAttr('y1')}}</dt> <dd>Определяет координату начальной точки линии по оси y.<br> - <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>неминуемый</em>: <strong>да</strong></small></dd> <dt>{{SVGAttr('y2')}}</dt> <dd>Определяет координату конечной точки линии по оси y.<br> - <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>неминуемый</em>: <strong>да</strong></small></dd> <dt>{{SVGAttr("pathLength")}}</dt> <dd>Определяет общую длину пути в пользовательских единицах.<br> - <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <em>none</em>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <em>none</em>; А<em>неминуемый</em>: <strong>да</strong></small></dd> </dl> <h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> @@ -57,7 +57,7 @@ original_slug: Web/SVG/Элемент/line <dt>Атрибуты события</dt> <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Глобальные атрибуты события</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Графические атрибуты события</a></small></dd> <dt><a href="/docs/Web/SVG/Attribute/Presentation">Атрибуты презентации</a></dt> - <dd><small>В превую очередь: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dd><small>В первую очередь: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> <dt>Атрибуты ARIA</dt> <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> </dl> diff --git a/files/ru/web/svg/element/path/index.html b/files/ru/web/svg/element/path/index.html index 6f3ac7dad7..39270c7dbf 100644 --- a/files/ru/web/svg/element/path/index.html +++ b/files/ru/web/svg/element/path/index.html @@ -29,10 +29,10 @@ original_slug: Web/SVG/Элемент/path <dl> <dt id="attr-cx">{{SVGAttr("d")}}</dt> <dd>Этот атрибут определяет форму.<br> - <small><em>Тип значения</em>: <strong><string></strong> ; <em>Значеие по умолчанию</em>: <code>''</code>; <em>Анимирование</em>: <strong>Да</strong></small></dd> + <small><em>Тип значения</em>: <strong><string></strong> ; <em>Значение по умолчанию</em>: <code>''</code>; <em>Анимирование</em>: <strong>Да</strong></small></dd> <dt>{{SVGAttr("pathLength")}}</dt> <dd>Этот атрибут позволяет указывать общую длину в пользовательских единицах.<br> - <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значеие по умолчанию</em>:<em>нет</em>; <em>Анимирование</em>: <strong>Да</strong></small></dd> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>:<em>нет</em>; <em>Анимирование</em>: <strong>Да</strong></small></dd> </dl> <h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> diff --git a/files/ru/web/svg/svg_as_an_image/index.html b/files/ru/web/svg/svg_as_an_image/index.html index e179b323b2..87f9ecff47 100644 --- a/files/ru/web/svg/svg_as_an_image/index.html +++ b/files/ru/web/svg/svg_as_an_image/index.html @@ -28,7 +28,7 @@ translation_of: Web/SVG/SVG_as_an_Image <ul> <li><a href="/en-US/docs/JavaScript">JavaScript</a> отключен.</li> - <li>Внешние ресурсы (например, изображеня, таблицы стилей) не могут быть загружены, хотя их можно использовать, если они встроены в данные: URI.</li> + <li>Внешние ресурсы (например, изображения, таблицы стилей) не могут быть загружены, хотя их можно использовать, если они встроены в данные: URI.</li> <li>{{cssxref(":visited")}}-стили ссылок не отображаются.</li> <li>Стилизация виджитов на платформе (основанная на теме ОС) отключена.</li> </ul> diff --git a/files/ru/web/svg/tutorial/basic_shapes/index.html b/files/ru/web/svg/tutorial/basic_shapes/index.html index 6941dc5257..290e5af23d 100644 --- a/files/ru/web/svg/tutorial/basic_shapes/index.html +++ b/files/ru/web/svg/tutorial/basic_shapes/index.html @@ -36,7 +36,7 @@ original_slug: Web/SVG/Tutorial/Основные_Фигуры <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> </svg></pre> -<div class="note"><strong>Замечание:</strong> Атрибуты <code>stroke</code>, <code>stroke-width</code> и <code>fill</code> описываются в рукодстве далее.</div> +<div class="note"><strong>Замечание:</strong> Атрибуты <code>stroke</code>, <code>stroke-width</code> и <code>fill</code> описываются в руководстве далее.</div> <h3 id="Rectangles" name="Rectangles">Прямоугольники</h3> @@ -77,7 +77,7 @@ original_slug: Web/SVG/Tutorial/Основные_Фигуры <h3 id="Ellipse" name="Ellipse">Эллипс</h3> -<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a> - это наиболее общая форма элемента окружность, в котором можно маштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.</p> +<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a> - это наиболее общая форма элемента окружность, в котором можно масштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.</p> <pre class="brush:xml;gutter:false;"><ellipse cx="75" cy="75" rx="20" ry="5"/></pre> diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html index 5e449ab899..698933241a 100644 --- a/files/ru/web/svg/tutorial/basic_transformations/index.html +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html @@ -56,7 +56,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <h2 id="Масштабирование">Масштабирование</h2> -<p><code>scale()</code> изменяем размер элемента. Он использует 2 параметра. Первый - это коэффициент масшабирования по оси Х, а второй - по оси Y. Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, <var>0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.</var></p> +<p><code>scale()</code> изменяем размер элемента. Он использует 2 параметра. Первый - это коэффициент масштабирования по оси Х, а второй - по оси Y. Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, <var>0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.</var></p> <h2 id="Комплексные_перемещения_с_matrix"><strong id="docs-internal-guid-68ee5272-9619-cb26-01de-19a4df728cd5">Комплексные перемещения с <code>matrix()</code></strong></h2> @@ -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)"> @@ -83,7 +83,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <h2 id="Встраивание_SVG_в_SVG">Встраивание SVG в SVG</h2> -<p>В отличие от HTML, SVG позволяет встраивать другие <code>svg</code> элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя <code>viewBox</code>, <code>width</code> и<code>height</code> внутреннего <code>svg</code> элемнта.</p> +<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"> <svg width="100" height="100" viewBox="0 0 50 50"> @@ -92,7 +92,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования </svg> </pre> -<p>На примере выше, так же как и на других примерах ранее, вы можете видеть такой же эффект увеличениея изображения в два раза.</p> +<p>На примере выше, так же как и на других примерах ранее, вы можете видеть такой же эффект увеличения изображения в два раза.</p> <p>{{ EmbedLiveSample('Embedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p> diff --git a/files/ru/web/svg/tutorial/getting_started/index.html b/files/ru/web/svg/tutorial/getting_started/index.html index b86419591e..c50b5ba0ea 100644 --- a/files/ru/web/svg/tutorial/getting_started/index.html +++ b/files/ru/web/svg/tutorial/getting_started/index.html @@ -37,8 +37,8 @@ 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>до 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> </ul> </li> <li>Фон устанавливается красным при помощи рисования прямоугольника <a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect"><code><rect/></code></a>, который покрывает всю область изображения</li> @@ -50,7 +50,7 @@ translation_of: Web/SVG/Tutorial/Getting_Started <ul> <li>Первая важная вещь, которую следует заметить - это порядок отображения элементов. Глобально действующее правило для файлов SVG - элементы, <em>которые отрендерились позднее</em>, отображаются <em>поверх </em>предыдущих элементов. Чем дальше вниз элемент (по коду / порядку рендеринга), тем более видимым он будет.</li> - <li>Файлы SVG в вэбе могут быть отображены прямо в браузере или внедрены в файлы HTML посредством нескольких методов: + <li>Файлы SVG в вебе могут быть отображены прямо в браузере или внедрены в файлы HTML посредством нескольких методов: <ul> <li>Если HTML является XHTML и выводится как тип приложение<code>/xhtml+xml</code>, SVG может быть прямо внедрён в источник XML.</li> <li>Если HTML является HTML5, и браузер совместим с HTML5, SVG может быть прямо внедрён тоже. Однако, возможны синтаксические изменения для соответствия с HTML5 спецификацией</li> diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html index bdb5e39461..2e4ef085cf 100644 --- a/files/ru/web/svg/tutorial/gradients/index.html +++ b/files/ru/web/svg/tutorial/gradients/index.html @@ -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> @@ -168,12 +168,12 @@ translation_of: Web/SVG/Tutorial/Gradients <p>{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}</p> -<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> +<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> -<p>Вы также можете применить иную трансформацию к градиенту, используя аттрибут <strong><code>gradientTransform</code></strong>, но мы пока что <a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">его не изучали</a>, я осталю это на потом.<br> +<p>Вы также можете применить иную трансформацию к градиенту, используя атрибут <strong><code>gradientTransform</code></strong>, но мы пока что <a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">его не изучали</a>, я оставлю это на потом.<br> <br> Существуют и другие предостережения для работы с <br> <code>gradientUnits="objectBoundingBox"</code>, когда поле ограничения объекта не является квадратным, но они довольно сложны и им придется ждать, пока кто-то другой не соизволит объяснить их.</p> diff --git a/files/ru/web/svg/tutorial/index.html b/files/ru/web/svg/tutorial/index.html index ef0fc0459c..2d847f1b87 100644 --- a/files/ru/web/svg/tutorial/index.html +++ b/files/ru/web/svg/tutorial/index.html @@ -11,7 +11,7 @@ translation_of: Web/SVG/Tutorial --- <p>Масштабируемая векторная графика (<a href="/en-US/Web/SVG" title="en-US/Web/SVG">SVG</a>), — это подмножество расширяемого языка разметки XML созданный Консорциумом Всемирной паутины (W3C). Эта технология реализована в Firefox, Opera, Internet Explorer, WebKit и в прочих браузерах.</p> -<p>Это учебное пособие призвано обьяснить Вам суть технологии SVG и ознакомить с её техническими деталями. Если Вы хотите только рисовать красивые изображения, то Вы можете найти более полезные учебные ресурсы. Есть хорошее учебное пособие для знакомства с SVG — это учебное пособие от W3C <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>.</p> +<p>Это учебное пособие призвано объяснить Вам суть технологии SVG и ознакомить с её техническими деталями. Если Вы хотите только рисовать красивые изображения, то Вы можете найти более полезные учебные ресурсы. Есть хорошее учебное пособие для знакомства с SVG — это учебное пособие от W3C <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>.</p> <div class="note">Это учебное пособие находится в стадии разработки. Если Вы можете, то, пожалуйста, помогите с написанием одного или нескольких параграфов. Плюс балл Гриффиндору за написание целой страницы!</div> diff --git a/files/ru/web/svg/tutorial/paths/index.html b/files/ru/web/svg/tutorial/paths/index.html index 63d4cf6412..2b6b81d983 100644 --- a/files/ru/web/svg/tutorial/paths/index.html +++ b/files/ru/web/svg/tutorial/paths/index.html @@ -164,7 +164,7 @@ translation_of: Web/SVG/Tutorial/Paths <h3 id="Arcs" name="Arcs">Дуги</h3> -<p>Другой тип кривых линий, которые можно создать с помощью SVG - дуга (команда A). Дуги - секции кругов или эллипсов. При заданных x- и y-радиусах есть два эллипса, которые могут соединяться любыми двумя точками (пока они находятся внутри радиуса круга). Вдоль любого из этих кругов есть два пути, которые могут испольовать для соединения точек, так что в любой ситуации возможно 4 дуги.</p> +<p>Другой тип кривых линий, которые можно создать с помощью SVG - дуга (команда A). Дуги - секции кругов или эллипсов. При заданных x- и y-радиусах есть два эллипса, которые могут соединяться любыми двумя точками (пока они находятся внутри радиуса круга). Вдоль любого из этих кругов есть два пути, которые могут использовать для соединения точек, так что в любой ситуации возможно 4 дуги.</p> <pre> A rx ry x-axis-rotation large-arc-flag sweep-flag x y a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy @@ -187,7 +187,7 @@ translation_of: Web/SVG/Tutorial/Paths <p>Пример показывает элемент <em>path</em>, который проходит по странице диагонально. В центре этого элемента вырезаны две эллиптические дуги (радиус x = 30, радиус y = 50). В первой дуге параметр <em>x-asix-rotation = 0</em>, а это означает, что эллипс, по которому проходит дуга (показан серым) расположен вертикально. Во второй дуге параметр <em>x-asix-rotation = -45. </em>Это поворачивает эллипс так, что направление его малой оси совпадает с направлением пути, как это видно на рисунке выше.</p> -<p>Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - <em>large-arc-flag. </em>Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - <em>sweep-flag. </em>Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.</p> +<p>Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - <em>large-arc-flag. </em>Он определяет, должна ли дуга быть больше или меньше 180 гградусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - <em>sweep-flag. </em>Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.</p> <p><img alt="Show the 4 arcs on the Ellipse example" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png"></p> @@ -204,11 +204,11 @@ translation_of: Web/SVG/Tutorial/Paths <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/> </svg></pre> -<p>Заметьте, что каждый голубой эллипс сформирован двумя дугами, в завимости от того движетесь ли вы по часовой или против часовой стрелке. Каждый эллипс имеет короткую и длинную дуги. Оба эллипса просто зеркальные отражения друг друга. Они отражены вдоль линии, сформированной start->end точками.</p> +<p>Заметьте, что каждый голубой эллипс сформирован двумя дугами, в зависимости от того движетесь ли вы по часовой или против часовой стрелке. Каждый эллипс имеет короткую и длинную дуги. Оба эллипса просто зеркальные отражения друг друга. Они отражены вдоль линии, сформированной start->end точками.</p> -<p>Если start->end точки расположены далеко и не попадают в пределы радусов эллипсов по x и y, то в этом случае радуисы эллипсов будут увеличены до величины, нужной чтобы достичь точек start->end. Интерактивный codepen внизу этой страницы наглядно это демонстрирует. Для определения достаточны ли велики радиусы ваших эллипсов чтобы требовать увеличения, вам нужно решить систему уравнений подобную <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F36%5E2)+%2B+((215+-+y)%5E2%2F60%5E2)+%3D+1,+((150.71+-+x)%5E2%2F36%5E2)+%2B+((170.29+-+y)%5E2%2F60%5E2)+%3D+1">этой на wolfram alpha</a>. Это вычислиние для non-rotated эллипса с start->end (110, 215)->(150.71, 170.29). Решенимем, (x, y), является центр эллипса(ов). Следющее вычисление для non-rotated эллипса с start->end (110, 215)->(162.55, 162.45). Решение будет <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F30%5E2)+%2B+((215+-+y)%5E2%2F50%5E2)+%3D+1,+((162.55+-+x)%5E2%2F30%5E2)+%2B+((162.45+-+y)%5E2%2F50%5E2)+%3D+1">мнимым</a> если радиусы ваших эллипсов слишком малы. Решение содержит небольшой мнимый компонент потому, что эллипсы были лишь слегка расширены.</p> +<p>Если start->end точки расположены далеко и не попадают в пределы градусов эллипсов по x и y, то в этом случае радиусы эллипсов будут увеличены до величины, нужной чтобы достичь точек start->end. Интерактивный codepen внизу этой страницы наглядно это демонстрирует. Для определения достаточны ли велики радиусы ваших эллипсов чтобы требовать увеличения, вам нужно решить систему уравнений подобную <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F36%5E2)+%2B+((215+-+y)%5E2%2F60%5E2)+%3D+1,+((150.71+-+x)%5E2%2F36%5E2)+%2B+((170.29+-+y)%5E2%2F60%5E2)+%3D+1">этой на wolfram alpha</a>. Это вычисление для non-rotated эллипса с start->end (110, 215)->(150.71, 170.29). Решением, (x, y), является центр эллипса(ов). Следующее вычисление для non-rotated эллипса с start->end (110, 215)->(162.55, 162.45). Решение будет <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F30%5E2)+%2B+((215+-+y)%5E2%2F50%5E2)+%3D+1,+((162.55+-+x)%5E2%2F30%5E2)+%2B+((162.45+-+y)%5E2%2F50%5E2)+%3D+1">мнимым</a> если радиусы ваших эллипсов слишком малы. Решение содержит небольшой мнимый компонент потому, что эллипсы были лишь слегка расширены.</p> -<p>Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - <em>large-arc-flag. </em>Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - <em>sweep-flag. </em>Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.</p> +<p>Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - <em>large-arc-flag. </em>Он определяет, должна ли дуга быть больше или меньше 180 гградусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - <em>sweep-flag. </em>Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.</p> <p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p> diff --git a/files/ru/web/svg/tutorial/patterns/index.html b/files/ru/web/svg/tutorial/patterns/index.html index 1db8bc9448..4c2e459016 100644 --- a/files/ru/web/svg/tutorial/patterns/index.html +++ b/files/ru/web/svg/tutorial/patterns/index.html @@ -34,9 +34,9 @@ translation_of: Web/SVG/Tutorial/Patterns <p>Внутри элемента <pattern> вы можете использовать любые другие основные фигуры, которые использовались ранее. И каждая из них может быть стилизована, используя любые из возможных вариантов стилизаций, которые Вы изучали до этого, включая градиенты и прозрачность. Выше мы просто нарисовали два прямоугольника внутри нашего шаблона (которые перекрываются, и один из которых в два раза больше другого и используется для заполнения всего шаблона), и один круг.</p> -<p>Сбивающая с толку вещь - это определение единиц измерения и размера. В примере выше мы определили ширину и высоту соответствующими аттрибутами внутри паттерна, что бы указать как далеко паттерн будет "продолжаться", прежде чем начать повторяться. Также доступны <strong>x</strong> и <strong>y</strong> атрибуты для смещения стартовой точки этого прямоугольника в том месте где вы его отрисовываете. Причина по которой они тут использованы, описана ниже.</p> +<p>Сбивающая с толку вещь - это определение единиц измерения и размера. В примере выше мы определили ширину и высоту соответствующими атрибутами внутри паттерна, что бы указать как далеко паттерн будет "продолжаться", прежде чем начать повторяться. Также доступны <strong>x</strong> и <strong>y</strong> атрибуты для смещения стартовой точки этого прямоугольника в том месте где вы его отрисовываете. Причина по которой они тут использованы, описана ниже.</p> -<p>Как и с <strong><code>gradientUnits</code></strong> атрибутом, использованном ранее, у паттерна также есть атрибут <strong><code>patternUnits</code> </strong>. Он определяет единицы измерения, которые принимают атрибуты. По дефолту используется значене "<strong>objectBoundingBox</strong>", (как и в предыдущем разделе). Так что значения от 0 до 1 будут масштабированы в зависимости от размеров объекта, к которому вы применяете паттерн. Поскольку в данном случае мы хотим, чтобы шаблон повторялся 4 раза по горизонтали и вертикали, ширину и высоту мы установили в значение 0.25. Что означает 0.25 от размера целевого объекта</p> +<p>Как и с <strong><code>gradientUnits</code></strong> атрибутом, использованном ранее, у паттерна также есть атрибут <strong><code>patternUnits</code> </strong>. Он определяет единицы измерения, которые принимают атрибуты. По дефолту используется значение "<strong>objectBoundingBox</strong>", (как и в предыдущем разделе). Так что значения от 0 до 1 будут масштабированы в зависимости от размеров объекта, к которому вы применяете паттерн. Поскольку в данном случае мы хотим, чтобы шаблон повторялся 4 раза по горизонтали и вертикали, ширину и высоту мы установили в значение 0.25. Что означает 0.25 от размера целевого объекта</p> <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> diff --git a/files/ru/web/svg/tutorial/positions/index.html b/files/ru/web/svg/tutorial/positions/index.html index a92d044fa8..9d20d29d1a 100644 --- a/files/ru/web/svg/tutorial/positions/index.html +++ b/files/ru/web/svg/tutorial/positions/index.html @@ -24,7 +24,7 @@ original_slug: Web/SVG/Tutorial/Позиции <h3 id="Что_такое_пиксели">Что такое "пиксели"?</h3> -<p>В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Маcштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.</p> +<p>В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Масштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.</p> <p>Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента <code>svg</code>:</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 64489d873c..68aec28d65 100644 --- a/files/ru/web/svg/tutorial/svg_and_css/index.html +++ b/files/ru/web/svg/tutorial/svg_and_css/index.html @@ -202,7 +202,7 @@ svg { <caption>Задание</caption> <tbody> <tr> - <td>Измение таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.</td> + <td>Изменить таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.</td> </tr> </tbody> </table> 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 fc3ab83319..7f993c7bf8 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 @@ -96,7 +96,7 @@ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); <p><code>meet </code>- сохраняет пропорции, умещая svg в область просмотра</p> -<p><code>slice </code>- тоже cохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместиласть в область</p> +<p><code>slice </code>- тоже сохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместилась в область</p> <p>Также есть спецификатор <code>none который означает, что изображение заполнит область путем масштабирования сторон, не сохраняя пропорции (растянет).</code></p> |