Слои Маски SVG в CSS
Маски для изображений можно создавать и в SVG.
Эта задача ложится на элемент <mask>, который применяет маску к изображению и позволяет создавать для него разные слои маски.
Слой Маски SVG - Круг
Круг рисуется с помощью элемента SVG <circle>.
Пример
Здесь слой маски принимает форму круга:
Prompt
Создайте элемент SVG (600x400) с маской, использующей круг (радиус 150, с центром в точке 200,200), залитый белым цветом, применённый к пейзажному изображению (используйте "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask Layer - Circle</title>
</head>
<body>
<h2>SVG Mask Layer - Circle</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<circle r="150" cx="200" cy="200" fill="#ffffff" />
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
Слой Маски SVG - Эллипс
Эллипс рисуется с помощью элемента SVG <ellipse>.
Пример
Здесь слой маски принимает форму эллипса:
Prompt
Создайте элемент SVG (600x400) с маской, использующей эллипс (cx=220, cy=150, rx=200, ry=100), залитый белым цветом, применённый к пейзажному изображению (используйте "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask Layer - Ellipse</title>
</head>
<body>
<h2>SVG Mask Layer - Ellipse</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<ellipse cx="220" cy="150" rx="200" ry="100" fill="#ffffff" />
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
Слой Маски SVG - Треугольник
Любая фигура с тремя или более сторонами рисуется с помощью элемента SVG <polygon>.
Пример
Здесь слой маски принимает форму треугольника:
Prompt
Создайте элемент SVG (600x400) с маской, использующей многоугольник в форме треугольника (точки: 200 0, 400 400, 0 400), залитый белым цветом, применённый к пейзажному изображению (используйте "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask Layer - Triangle</title>
</head>
<body>
<h2>SVG Mask Layer - Triangle</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
Маска SVG - Звезда
Слой маски в форме звезды — ещё одна задача для элемента SVG <polygon>.
Пример
Здесь слой маски принимает форму звезды:
Prompt
Создайте элемент SVG (600x400) с маской, использующей многоугольник в форме звезды (точки: 100,10 40,198 190,78 10,78 160,198), залитый белым цветом, применённый к пейзажному изображению (используйте "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask - Star</title>
</head>
<body>
<h2>SVG Mask - Star</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
Маска SVG - Несколько Кругов
Одна маска может содержать несколько кругов, каждый в своей позиции.
Пример
Здесь три круга вместе образуют слой маски:
Prompt
Создайте элемент SVG (600x400) с маской, использующей три белых круга в разных позициях (cx=75 cy=75 r=75, cx=80 cy=260 r=75, cx=270 cy=160 r=75), применённой к пейзажному изображению (используйте "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask - Multiple Circles</title>
</head>
<body>
<h2>SVG Mask - Multiple Circles</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
Все Свойства CSS Маскирования
Ниже перечислены все свойства CSS маскирования:
mask-clip— задаёт область, на которую влияет изображение маски.mask-composite— задаёт операцию компоновки между текущим слоем маски и слоями маски под ним.mask-image— указывает изображение, которое служит слоем маски элемента.mask-mode— определяет, действует ли изображение слоя маски как маска яркости или как альфа-маска.mask-origin— задаёт позицию, от которой начинается изображение слоя маски.mask-position— задаёт место, где начинается изображение слоя маски.mask-repeat— управляет тем, как повторяется изображение слоя маски.mask-size— задаёт размер изображения слоя маски.mask-type— определяет, действует ли элемент SVG<mask>как маска яркости или как альфа-маска.