clip-rule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Thuộc tính clip-rule chỉ áp dụng cho các phần tử đồ họa nằm trong một phần tử <clipPath>. Thuộc tính clip-rule về cơ bản hoạt động như thuộc tính fill-rule, ngoại trừ việc nó áp dụng cho các định nghĩa <clipPath>.

Note: Là một thuộc tính trình bày, clip-rule cũng có một thuộc tính CSS tương ứng: clip-rule. Khi cả hai được chỉ định, thuộc tính CSS sẽ được ưu tiên.

Đoạn mã sau sẽ khiến một quy tắc cắt evenodd được áp dụng cho đường cắt vì clip-rule được chỉ định trên phần tử <path> định nghĩa hình dạng cắt:

html

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

trong khi đoạn mã sau sẽ không khiến quy tắc cắt evenodd được áp dụng vì clip-rule được chỉ định trên phần tử tham chiếu, không phải trên đối tượng định nghĩa hình dạng cắt:

html

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

Ghi chú sử dụng

Giá trị	nonzero \| evenodd \| inherit
Giá trị mặc định	nonzero
Có thể hoạt ảnh	Có

nonzero: Xem mô tả của thuộc tính fill-rule.
evenodd: Xem mô tả của thuộc tính fill-rule.

Ví dụ

html

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