Элемент SVGClipPath: свойство clipPathUnits

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

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

Только для чтения clipPathUnits свойство интерфейса SVGClipPathElement отражает атрибут clipPathUnits элемента <clipPath>, который определяет систему координат для содержимого элемента.

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

Значение

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

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

Примеры

<div>
  <svg viewBox="0 0 100 100" width="200" height="200">
    <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
      <circle cx="50" cy="50" r="35" />
    </clipPath>

    <clipPath id="clip2" clipPathUnits="objectBoundingBox">
      <circle cx=".5" cy=".5" r=".35" />
    </clipPath>

    <!-- Some reference rect to materialized to clip path -->
    <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 clipped with userSpaceOnUse units -->
    <use clip-path="url(#clip1)" href="#r1" fill="red" />
    <use clip-path="url(#clip1)" href="#r2" fill="blue" />
    <use clip-path="url(#clip1)" href="#r3" fill="yellow" />

    <!-- The last rect is clipped with objectBoundingBox units -->
    <use clip-path="url(#clip2)" href="#r4" fill="green" />
  </svg>
</div>
<pre id="log"></pre>

const clipPath1 = document.getElementById("clip1");
const clipPath2 = document.getElementById("clip2");

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

log.textContent = `The clipPath used three times has a 'clipPathUnits' value of ${clipPath1.clipPathUnits.baseVal}
The clipPath used three times has a 'clipPathUnits' value of ${clipPath2.clipPathUnits.baseVal}`;

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`clipPathUnits`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	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/SVGClipPathElement/clipPathUnits