From 59705f5814c1ece8cefc4c62a8897d4d8a5b38fc Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 19 Oct 2021 13:34:22 +0300 Subject: FIx more live examples (#2774) --- files/ru/web/svg/tutorial/basic_transformations/index.html | 8 ++++---- files/ru/web/svg/tutorial/clipping_and_masking/index.html | 6 +++--- files/ru/web/svg/tutorial/patterns/index.html | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) (limited to 'files/ru/web/svg/tutorial') diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html index 3c118fb63a..4523cbace6 100644 --- a/files/ru/web/svg/tutorial/basic_transformations/index.html +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html @@ -33,7 +33,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования

Пример генерирует прямоугольник, перемещённый в точку  (30,40) вместо точки (0,0).

-

{{ EmbedLiveSample('Translation', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+

{{ EmbedLiveSample('Перемещения', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

если второе значение не задано, то оно приравнивается 0.

@@ -48,7 +48,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования

Данный пример показывает квадрат который повернули на 45 градусов. Значение для rotate() задаётся в градусах.

-

{{ EmbedLiveSample('Rotation', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+

{{ EmbedLiveSample('Вращение', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

Смещение углов

@@ -79,7 +79,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования

В результата прямоугольник в примере выше будет 100x100px. Более интригующие эффекты возникают, когда вы используете такие атрибуты, как userSpaceOnUse.

-

{{ EmbedLiveSample('Effects_on_Coordinate_Systems', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+

{{ EmbedLiveSample('Эффекты_на_системе_координат', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

Встраивание SVG в SVG

@@ -94,6 +94,6 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования

На примере выше, так же как и на других примерах ранее, вы можете видеть такой же эффект увеличения изображения в два раза.

-

{{ EmbedLiveSample('Embedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+

{{ EmbedLiveSample('Встраивание_SVG_в_SVG', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
diff --git a/files/ru/web/svg/tutorial/clipping_and_masking/index.html b/files/ru/web/svg/tutorial/clipping_and_masking/index.html index afc8d8d23c..259f61ad71 100644 --- a/files/ru/web/svg/tutorial/clipping_and_masking/index.html +++ b/files/ru/web/svg/tutorial/clipping_and_masking/index.html @@ -33,7 +33,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking
При этом сам прямоугольник отрисован не будет. Вместо этого прямоугольник задаст область отрисовки. Так как прямоугольник перекрывает только верхнюю половину круга, нижняя половина круга исчезает:

-

{{ EmbedLiveSample('Creating_clips','240','240','/files/3224/clipdemo.png') }}

+

{{ EmbedLiveSample('Кадрирование_изображений','240','240','/files/3224/clipdemo.png') }}

Теперь мы получили полуокружность без необходимости использования элемента path.  При “обрезке” каждый путь внутри clipPath проверяется и оценивается вместе с его свойствами stroke и transform. Другими словами, всё что не находится в залитой области clipPath не будет отображено. Цвет, непрозрачность и т. д. не влияют на результат.

@@ -59,7 +59,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking

Фактически на примере находятся два прямоугольника: зелёный на нижнем слое и красный на верхнем. У красного есть атрибут mask, который ссылается на элемент mask. Содержимое маски это элемент rect, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зелёный градиент: 

-

{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}

+

{{ EmbedLiveSample('Маска','240','240','/files/3234/maskdemo.png') }}

Прозрачность opacity

@@ -76,7 +76,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking </svg> -

{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}

+

{{ EmbedLiveSample('Прозрачность_opacity','240','240','/files/3231/opacitydemo.png') }}

В этом примере используется красный круг на голубом фоне. Жёлтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.

diff --git a/files/ru/web/svg/tutorial/patterns/index.html b/files/ru/web/svg/tutorial/patterns/index.html index 41202790de..22e7c5a980 100644 --- a/files/ru/web/svg/tutorial/patterns/index.html +++ b/files/ru/web/svg/tutorial/patterns/index.html @@ -30,7 +30,7 @@ translation_of: Web/SVG/Tutorial/Patterns   <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> -

{{ EmbedLiveSample('Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}

+

{{ EmbedLiveSample('Шаблоны_Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}

Внутри элемента <pattern> вы можете использовать любые другие основные фигуры, которые использовались ранее.  И каждая из них может быть стилизована, используя любые из возможных вариантов стилизаций, которые вы изучали до этого, включая градиенты и прозрачность. Выше мы просто нарисовали два прямоугольника внутри нашего шаблона (которые перекрываются, и один из которых в два раза больше другого и используется для заполнения всего шаблона), и один круг.

-- cgit v1.2.3-54-g00ecf