clip-rule

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

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

Атрибут clip-rule применяется только к графическим элементам, содержащимся внутри элемента <clipPath>. Атрибут clip-rule по сути работает так же, как атрибут fill-rule, но применяется к определениям <clipPath>.

Примечание: Как атрибут представления, clip-rule также имеет соответствующее свойство CSS: clip-rule. Если заданы оба варианта, приоритет имеет свойство CSS.

Следующий фрагмент кода применит к обтравочному контуру правило обтравки evenodd, поскольку атрибут clip-rule указан в элементе <path>, определяющем форму обтравки:

<g>
  <clipPath id="MyClip">
    <path d="..." clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#MyClip)" ... />
</g>

В то же время следующий фрагмент кода не применит к обтравочному контуру правило обтравки evenodd, поскольку clip-rule указан у ссылающегося элемента, а не у объекта, определяющего форму обтравки:

<g>
  <clipPath id="MyClip">
    <path d="..." />
  </clipPath>
  <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>

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

Значение	nonzero \| evenodd \| inherit
Значение по умолчанию	nonzero
Анимируемое	Да

nonzero: См. описание свойства fill-rule.
evenodd: См. описание свойства fill-rule.

Пример

<svg
  width="100"
  viewBox="0 0 100 90"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <!-- Define star path -->
  <defs>
    <path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
  </defs>

  <!-- Left: evenodd -->
  <clipPath id="emptyStar">
    <use href="#star" clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />

  <!-- Right: nonzero -->
  <clipPath id="filledStar">
    <use href="#star" clip-rule="nonzero" />
  </clipPath>
  <rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
</svg>

Элементы

Атрибут clip-rule можно использовать со следующими элементами, но только если они находятся внутри элемента <clipPath>.

Графические элементы

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

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

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`clip-rule`	≤80	≤80	≤72	≤67	≤13.1	≤80	≤79	≤57	≤13.4	≤13.0	≤80	≤13.4

См. также

<clipPath>
Свойство CSS clip-rule

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