<mask>

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с ⁨июля 2015 года⁩.

Элемент <mask> SVG задаёт маску для наложения текущего объекта на фон. Маска используется или задаётся с помощью свойства mask и свойства CSS mask-image.

Контекст использования

Категории Контейнерный элемент

Допустимое содержимое Любое количество следующих элементов в любом порядке:
Элементы анимации
Описательные элементы
Элементы фигур
Структурные элементы
Элементы градиентов
<a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Категории	Контейнерный элемент
Допустимое содержимое	Любое количество следующих элементов в любом порядке: Элементы анимации Описательные элементы Элементы фигур Структурные элементы Элементы градиентов `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Атрибуты

height: Этот атрибут задаёт высоту области маскирования. Тип значения: <length>; Значение по умолчанию: 120%; Анимируемый: да
mask-type: Этот атрибут задаёт режим маскирования для содержимого элемента <mask>. Тип значения: alpha | luminance; Значение по умолчанию: luminance; Анимируемый: да
maskContentUnits: Этот атрибут задаёт систему координат для содержимого элемента <mask>. Тип значения: userSpaceOnUse | objectBoundingBox; Значение по умолчанию: userSpaceOnUse; Анимируемый: да
maskUnits: Этот атрибут задаёт систему координат для атрибутов x, y, width и height элемента <mask>. Тип значения: userSpaceOnUse | objectBoundingBox; Значение по умолчанию: objectBoundingBox; Анимируемый: да
x: Этот атрибут задаёт координату по оси X верхнего левого угла области маскирования. Тип значения: <coordinate>; Значение по умолчанию: -10%; Анимируемый: да
y: Этот атрибут задаёт координату по оси Y верхнего левого угла области маскирования. Тип значения: <coordinate>; Значение по умолчанию: -10%; Анимируемый: да
width: Этот атрибут задаёт ширину области маскирования. Тип значения: <length>; Значение по умолчанию: 120%; Анимируемый: да

Интерфейс DOM

Этот элемент реализует интерфейс SVGMaskElement.

Пример

<svg viewBox="-10 -10 120 120">
  <rect x="-10" y="-10" width="120" height="120" fill="blue" />
  <mask id="myMask" mask-type="luminance">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Everything under a black pixel will be invisible -->
    <path
      d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
      fill="black" />
  </mask>

  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" fill="purple" mask="url(#myMask)" />
</svg>

Спецификации

Спецификация
Модуль маскирования CSS уровня 1> # MaskElement>

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`mask`	1	12	3	15	3	18	4	14	2	1.0	4.4	2
`height`	1	12	3	15	3	18	4	14	2	1.0	4.4	2
`maskContentUnits`	1	79	3	15	3	18	4	14	2	1.0	4.4	2
`maskUnits`	1	79	3	15	3	18	4	14	2	1.0	4.4	2
`systemLanguage`	1	12	12	15	3	18	14	14	2	1.0	4.4	2
`width`	1	12	3	15	3	18	4	14	2	1.0	4.4	2
`x`	1	12	3	15	3	18	4	14	2	1.0	4.4	2
`y`	1	12	3	15	3	18	4	14	2	1.0	4.4	2

См. также

Свойство CSS mask-type
Другие SVG-элементы обрезки и маскирования: <clipPath>
Свойства CSS для обрезки и маскирования: mask, mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-composite, mask-size

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/mask