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/clipping_and_masking/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'files/ru/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% непрозрачности, что приводит к эффекту двойного цвета.

-- cgit v1.2.3-54-g00ecf