clip

Устарело: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему её поддерживать, она уже могла быть удалена из соответствующих веб-стандартов, может находиться в процессе удаления или сохраняться только в целях совместимости. Избегайте её использования и, если возможно, обновите существующий код; чтобы принять решение, см. таблицу совместимости внизу этой страницы. Обратите внимание: эта функция может перестать работать в любой момент.

Атрибут clip задаёт видимую область элемента. Вместо него следует использовать clip-path.

Примечание: Атрибут clip, используемый для презентации, также имеет аналог в виде свойства CSS: clip. Если заданы оба варианта, приоритет имеет свойство CSS.

У этого атрибута те же допустимые значения параметров, что и у свойства CSS clip. Для значений координат в rect() допускаются числа без единиц измерения, которые указывают на текущие пользовательские координаты. Значение auto задаёт область отсечения по границам области просмотра, созданной данным элементом.

Этот атрибут можно использовать со следующими SVG-элементами:

Пример

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Auto clipping -->
  <svg x="0" width="10" height="10" clip="auto">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>

  <!-- Rect(top, right, bottom, left) clipping -->
  <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>
</svg>

Примечания по использованию

Значение	`auto` \| `rect()`
Значение по умолчанию	`auto`
Анимируемый	Да

Значение auto задаёт область отсечения по границам области просмотра, созданной данным элементом. Значение rect() задаёт прямоугольную область отсечения в соответствии со следующим синтаксисом: rect(<top>, <right>, <bottom>, <left>). Значения <top> и <bottom> задают смещения от верхнего края границы области просмотра элемента, а значения <right> и <left> задают смещения от левого края границы области просмотра элемента.

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

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

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`clip`	1	12	1	7	1 Safari ошибочно интерпретирует `clip: auto` как `clip: rect(auto, auto, auto, auto)`.	18	4	14	1 Safari на iOS ошибочно интерпретирует `clip: auto` как `clip: rect(auto, auto, auto, auto)`.	1.0	37	1 WebView на iOS ошибочно интерпретирует `clip: auto` как `clip: rect(auto, auto, auto, auto)`.

© 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/Attribute/clip