diff options
author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-03-15 14:29:50 +0300 |
---|---|---|
committer | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-03-15 14:29:50 +0300 |
commit | 55ddd4454665a3c66e3d5b186bc79048468d36e7 (patch) | |
tree | 5391f1ae01bbcd484387bbc2373492ac9bc89dbc /files/ru/web/svg/tutorial | |
parent | 08dc1a1e60063705ccefc1eb4ef0a17d1ddf196b (diff) | |
download | translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.gz translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.bz2 translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.zip |
Auto fixes
Diffstat (limited to 'files/ru/web/svg/tutorial')
-rw-r--r-- | files/ru/web/svg/tutorial/basic_shapes/index.html | 4 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/basic_transformations/index.html | 8 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/getting_started/index.html | 6 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/gradients/index.html | 10 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/index.html | 2 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/paths/index.html | 10 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/patterns/index.html | 4 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/positions/index.html | 2 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/svg_and_css/index.html | 2 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/svg_in_html_introduction/index.html | 2 |
10 files changed, 25 insertions, 25 deletions
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> |