clip

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

Атрибут clip — это атрибут представления, определяющий видимую область элемента.

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

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

Пример

html

<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>

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

Предупреждение: Это свойство устарело. Используйте clip-path вместо него.

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

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

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

Спецификация
CSS Masking Module Level 1 # clip-property

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

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

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