SVGMaskElement: свойство maskContentUnits

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

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

Только для чтения maskContentUnits свойство интерфейса SVGMaskElement отражает атрибут maskContentUnits. Оно указывает, какую систему координат следует использовать для содержимого элемента <mask>.

Примечание: Хотя это свойство является только для чтения, оно просто содержит два значения, которые можно изменить: baseVal и animVal.

Значение

Объект SVGAnimatedEnumeration, представляющий систему координат. Возможные значения определены в интерфейсе SVGUnitTypes:

0 (SVG_UNIT_TYPE_UNKNOWN): Тип не является одним из предопределенных типов.
1 (SVG_UNIT_TYPE_USERSPACEONUSE): Соответствует значению userSpaceOnUse для атрибута maskContentUnits и означает, что все координаты внутри элемента относятся к системе координат пользователя, как определено при создании маски. Это значение по умолчанию.
2 (SVG_UNIT_TYPE_OBJECTBOUNDINGBOX): Соответствует значению objectBoundingBox для атрибута и означает, что все координаты внутри элемента относительны к области элемента, к которому применяется маска. Это означает, что начало системы координат находится в верхнем левом углу области элемента, а ширина и высота области элемента считаются равными 1 единице.

Примеры

<div>
  <svg
    viewBox="0 0 100 100"
    width="150"
    height="150"
    xmlns="http://www.w3.org/2000/svg">
    <mask id="mask1" maskContentUnits="userSpaceOnUse">
      <rect fill="black" x="0" y="0" width="100%" height="100%" />
      <circle fill="white" cx="50" cy="50" r="35" />
    </mask>

    <mask id="mask2" maskContentUnits="objectBoundingBox">
      <rect fill="black" x="0" y="0" width="100%" height="100%" />
      <circle fill="white" cx=".5" cy=".5" r=".35" />
      <animate
        attributeName="maskContentUnits"
        values="objectBoundingBox;userSpaceOnUse"
        dur="1s"
        repeatCount="indefinite" />
    </mask>

    <!-- Some reference rect to materialized the mask -->
    <rect id="r1" x="0" y="0" width="45" height="45" />
    <rect id="r2" x="0" y="55" width="45" height="45" />
    <rect id="r3" x="55" y="55" width="45" height="45" />
    <rect id="r4" x="55" y="0" width="45" height="45" />

    <!-- The first 3 rect are masked with useSpaceOnUse units -->
    <use mask="url(#mask1)" href="#r1" fill="blue" />
    <use mask="url(#mask1)" href="#r2" fill="yellow" />
    <use mask="url(#mask1)" href="#r3" fill="green" />

    <!-- The last rect is masked with objectBoundingBox units -->
    <use mask="url(#mask2)" href="#r4" fill="lightblue" />
  </svg>
</div>
<pre id="log"></pre>

const unitType = ["unknown", "userSpaceOnUse", "objectBoundingBox"];

const mask = document.getElementById("mask2");
const log = document.getElementById("log");

function displayLog() {
  const baseValue = unitType[mask.maskContentUnits.baseVal];
  const animValue = unitType[mask.maskContentUnits.animVal];
  log.textContent = `The top-right 'maskContentUnits.baseVal' coord system : ${baseValue}\n`;
  log.textContent += `The top-right 'maskContentUnits.animVal' coord system : ${animValue}`;
  requestAnimationFrame(displayLog);
}
displayLog();

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

Спецификация
Модуль CSS-маскирования уровня 1 # dom-svgmaskelement-maskcontentunits

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

	Десктоп					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`maskContentUnits`	1	12	3	≤12.1	3.1	18	4	≤12.1	2	1.0	3

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGMaskElement/maskContentUnits