fill-rule

Cú pháp

/* từ khóa */
fill-rule: evenodd;
fill-rule: nonzero;

/* Giá trị toàn cục */
fill-rule: inherit;
fill-rule: initial;
fill-rule: revert;
fill-rule: revert-layer;
fill-rule: unset;

Giá trị

nonzero

Đối với mỗi điểm trong hình dạng, một tia được vẽ theo hướng ngẫu nhiên ra ngoài cạnh ngoài của hình dạng. Mỗi tia được kiểm tra để xác định các vị trí mà tia cắt qua hình dạng. Bắt đầu với số đếm bằng không, cộng thêm một mỗi khi một đoạn đường dẫn cắt tia từ trái sang phải và trừ đi một mỗi khi một đoạn đường dẫn cắt tia từ phải sang trái. Sau khi đếm các giao điểm, nếu kết quả bằng không thì điểm đó nằm ngoài đường dẫn. Ngược lại, nó nằm bên trong.

evenodd

Đối với mỗi điểm trong hộp quy tắc fill, một tia được vẽ theo hướng ngẫu nhiên. Số lượng đoạn đường dẫn từ hình dạng đã cho mà tia cắt qua được đếm. Nếu số này là lẻ, điểm nằm bên trong; nếu chẵn, điểm nằm ngoài. Zero được coi là chẵn.

Định nghĩa hình thức

Cú pháp hình thức

fill-rule = 
  nonzero  |
  evenodd  

Ví dụ

Xác định quy tắc fill cho các phần tử SVG

Ví dụ này minh họa cách khai báo fill-rule, hiệu ứng của thuộc tính, và cách thuộc tính CSS fill-rule có quyền ưu tiên hơn thuộc tính fill-rule.

HTML

Chúng ta xác định một SVG với hai hình dạng phức tạp được định nghĩa bằng các phần tử SVG <polygon> và <path>. Hình đa giác có thuộc tính SVG fill-rule được đặt thành evenodd và đường dẫn hình ngôi sao được đặt thành nonzero, là giá trị mặc định. Để làm cho các đường thấy được, chúng ta đặt đường viền thành red bằng thuộc tính SVG stroke.

<p>Original SVG</p>

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="red"
    fill-rule="evenodd" />
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="red"
    fill-rule="nonzero" />
</svg>

<p><code>fill-rule: nonzero;</code></p>
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="red"
    fill-rule="evenodd" />
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="red"
    fill-rule="nonzero" />
</svg>
<p><code>fill-rule: evenodd;</code></p>
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="red"
    fill-rule="evenodd" />
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="red"
    fill-rule="nonzero" />
</svg>

SVG trên được lặp lại ba lần; chúng tôi chỉ hiển thị một bản sao để ngắn gọn.

CSS

Các hình dạng lồng trong SVG đầu tiên không có CSS nào được áp dụng. Chúng ta đặt các hình dạng bên trong SVG thứ hai để sử dụng giá trị nonzero. SVG thứ ba có tất cả các hình dạng lồng của nó được đặt thành evenodd.

svg {
  border: 1px solid;
  height: calc(33vh - 2.5em);
  margin-bottom: 10px;
}
p {
  margin: 0;
}

svg:nth-of-type(2) > * {
  fill-rule: nonzero;
}
svg:nth-of-type(3) > * {
  fill-rule: evenodd;
}

Kết quả

Với giá trị nonzero cho fill-rule, "bên trong" của hình dạng là toàn bộ hình dạng. Giá trị evenodd xác định một số khoảng trống là trống. Hình ảnh đầu tiên hiển thị fill-rule được bao gồm dưới dạng thuộc tính. Khai báo fill-rule trong CSS ghi đè các giá trị thuộc tính trong hình ảnh thứ hai và thứ ba.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Thuộc tính SVG fill-rule
• Thuộc tính trình bày: fill-rule, clip-rule, color-interpolation-filters, fill-opacity, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, và vector-effect
• opacity
• background-color
• <color>
• Kiểu dữ liệu <basic-shape>