Thuộc tính CSS fill-rule xác định cách một hình dạng được tô màu khi nó có các cạnh chồng chéo hoặc tự giao nhau. Hai giá trị phổ biến là 'nonzero' (mặc định), đếm số lần tia đi qua đường viền, và 'evenodd', đếm số lần chẵn lẻ. Việc lựa chọn fill-rule ảnh hưởng trực tiếp đến diện tích được tô màu của hình dạng phức tạp. Hiểu rõ thuộc tính này giúp tạo ra các hình dạng vector chính xác và phức tạp hơn.
Fill-Rule trong css là gì
Trong CSS, thuộc tính fill-rule xác định cách một hình dạng được tô đầy khi có các đường viền chồng chéo nhau. Nó kiểm soát việc xác định điểm nằm bên trong hay bên ngoài hình dạng phức tạp. Hai giá trị phổ biến là nonzero (tính tổng số lần quét qua đường viền) và evenodd (tính số lần quét chẵn lẻ). Việc lựa chọn fill-rule ảnh hưởng trực tiếp đến diện tích được tô màu của hình dạng.
Cấu trúc thuộc tính Fill-Rule
Fill-Rule: value;
Các giá trị của Fill-Rule property in css
Fill-rule property in CSS xác định cách một hình dạng phức tạp được tô màu, đặc biệt là khi hình dạng có các vùng chồng chéo nhau. Thuộc tính này ảnh hưởng đến cách trình duyệt xác định vùng bên trong và bên ngoài của hình dạng. Hiểu rõ Fill-Rule property in css là rất quan trọng để tạo ra các hình dạng phức tạp chính xác.
- evenodd: Tô màu các vùng có số lượng đường viền chẵn lẻ khác nhau.
- nonzero: Tô màu các vùng dựa trên tổng số đường viền bao quanh.
- inherit: Kế thừa giá trị fill-rule từ phần tử cha.
- initial: Thiết lập giá trị fill-rule về giá trị mặc định của nó.
- revert: Thiết lập giá trị fill-rule về giá trị được định nghĩa bởi user agent stylesheet.
- revert-layer: Thiết lập giá trị fill-rule về giá trị được định nghĩa bởi user agent stylesheet của layer hiện tại.
- unset: Thiết lập giá trị fill-rule về giá trị kế thừa hoặc giá trị ban đầu, tùy thuộc vào ngữ cảnh.
Ví dụ về giá trị evenodd trong Fill-Rule
Thuộc tính fill-rule trong CSS giúp xác định cách tô màu các hình dạng phức tạp, đặc biệt là những hình có đường viền chồng chéo. Giá trị evenodd sẽ tô màu các vùng nằm trong số lẻ các đường viền khép kín. Ngược lại, các vùng nằm trong số chẵn đường viền sẽ để trống. Nói đơn giản, nó đếm số lần đường viền bao quanh một điểm, số lẻ thì tô, số chẵn thì không. Hiểu rõ điều này giúp bạn tạo ra những hiệu ứng hình ảnh thú vị và phức tạp hơn.
Cấu trúc
Fill-Rule: evenodd;
Ví dụ
<html>
<head>
<style>
svg {
width: 200px;
height: 200px;
}
.evenodd {
fill-rule: evenodd;
}
.nonzero {
fill-rule: nonzero;
}
</style>
</head>
<body>
<svg>
<polygon points="100,10 40,198 190,78 10,78 160,198" class="evenodd" style="fill:red;" />
</svg>
<svg>
<polygon points="100,10 40,198 190,78 10,78 160,198" class="nonzero" style="fill:blue;" />
</svg>
</body>
</html>
Output
Ví dụ về giá trị nonzero trong Fill-Rule
Thuộc tính fill-rule trong CSS giúp điều khiển cách vẽ hình dạng phức tạp, đặc biệt là những hình có đường viền chồng chéo. Hai giá trị chính là nonzero và evenodd, mỗi giá trị có cách tính toán vùng tô khác nhau. nonzero đếm số lần đường viền quét qua một điểm, nếu số lần lẻ thì điểm đó nằm trong vùng tô. Nói cách khác, nonzero tô đầy những vùng bị bao quanh bởi đường viền. Việc lựa chọn nonzero hay evenodd phụ thuộc vào hình dạng và hiệu ứng mong muốn.
Cấu trúc
Fill-Rule: nonzero;
Ví dụ
<html>
<head>
<style>
svg {
width: 200px;
height: 200px;
}
polygon {
fill: lightblue;
fill-rule: nonzero;
stroke: black;
stroke-width: 2;
}
</style>
</head>
<body>
<svg>
<polygon points="100,10 40,198 190,78 10,78 160,198" />
</svg>
</body>
</html>
Output
Ví dụ về giá trị inherit trong Fill-Rule
Trong CSS, thuộc tính fill-rule với giá trị inherit giúp hình dạng kế thừa cách tô màu từ phần tử cha. Nói cách khác, hình dạng con sẽ sử dụng cùng quy tắc tô màu như hình dạng cha của nó. Điều này giúp tiết kiệm thời gian và giữ cho mã CSS của bạn gọn gàng hơn. Bạn không cần phải đặt lại thuộc tính này cho từng hình dạng con nếu muốn chúng có cùng kiểu tô màu. Việc sử dụng inherit giúp cho việc quản lý stylesheet dễ dàng hơn rất nhiều.
Cấu trúc
Fill-Rule: inherit;
Ví dụ
<html>
<head>
<style>
.parent {
fill-rule: evenodd;
width: 100px;
height: 100px;
}
.child {
fill-rule: inherit;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<svg class="parent" viewBox="0 0 100 100">
<polygon points="50,0 100,100 0,100" fill="red" />
<svg class="child" viewBox="0 0 50 50">
<polygon points="25,0 50,50 0,50" fill="blue" />
</svg>
</svg>
</body>
</html>
Output
Ví dụ về giá trị initial trong Fill-Rule
Thuộc tính fill-rule trong CSS dùng để xác định cách tô màu hình dạng phức tạp. Giá trị mặc định của nó là nonzero, nghĩa là tô màu dựa trên số lần đường viền bao quanh điểm. Nếu số lần bao quanh là số lẻ, điểm đó được tô màu; nếu là số chẵn thì không. Bạn có thể thay đổi thành evenodd để có cách tô màu khác. Việc lựa chọn giá trị phụ thuộc vào hiệu ứng mong muốn cho hình dạng của bạn.
Cấu trúc
Fill-Rule: initial;
Ví dụ
<html>
<head>
<style>
svg {
width: 200px;
height: 200px;
}
.evenodd {
fill-rule: evenodd;
}
.nonzero {
fill-rule: nonzero;
}
.initial {
fill-rule: initial; /* This will inherit the default value from the browser, which is usually 'nonzero' */
}
</style>
</head>
<body>
<svg>
<polygon points="100,10 40,198 190,78 10,78 160,198" class="evenodd" style="fill:red;" />
</svg>
<svg>
<polygon points="100,10 40,198 190,78 10,78 160,198" class="nonzero" style="fill:blue;" />
</svg>
<svg>
<polygon points="100,10 40,198 190,78 10,78 160,198" class="initial" style="fill:green;" />
</svg>
</body>
</html>
Output
Ví dụ về giá trị revert trong Fill-Rule
Thuộc tính fill-rule trong CSS giúp điều chỉnh cách vẽ hình dạng phức tạp, đặc biệt là những hình có đường viền chồng chéo. Giá trị revert sẽ đặt lại cách vẽ hình về giá trị mặc định của trình duyệt, tùy thuộc vào từng trình duyệt cụ thể. Điều này giúp đảm bảo tính nhất quán giữa các trình duyệt khác nhau, tránh những hiển thị không mong muốn. Bạn có thể sử dụng revert khi muốn loại bỏ các tùy chỉnh trước đó và quay về cài đặt mặc định. Nhờ đó, việc thiết kế trở nên đơn giản và dễ dự đoán hơn.
Cấu trúc
Fill-Rule: revert;
Ví dụ
<html>
<head>
<style>
.shape {
width: 100px;
height: 100px;
fill: lightblue;
fill-rule: nonzero; /* Default value */
}
.shape.revert {
fill-rule: revert;
}
</style>
</head>
<body>
<svg width="200" height="100">
<polygon points="50,0 100,100 0,100" class="shape" />
<polygon points="150,0 200,100 100,100" class="shape revert" />
</svg>
</body>
</html>
Output
Ví dụ về giá trị revert-layer trong Fill-Rule
Thuộc tính fill-rule trong CSS giúp điều chỉnh cách vẽ hình dạng phức tạp, đặc biệt là những hình có đường viền chồng chéo. Giá trị revert-layer sẽ sử dụng cài đặt fill-rule từ phần tử cha, giúp kế thừa kiểu vẽ từ bố cục tổng thể. Điều này rất hữu ích khi bạn muốn duy trì tính nhất quán trong việc tô màu các hình dạng trên trang web. Nó đơn giản hóa việc quản lý kiểu dáng, tránh phải đặt lại thuộc tính cho từng phần tử con. Nhờ đó, bạn có thể dễ dàng tạo ra các hình ảnh phức tạp một cách hiệu quả.
Cấu trúc
Fill-Rule: revert-layer;
Ví dụ
<html>
<style>
.shape {
width: 100px;
height: 100px;
fill: lightblue;
fill-rule: evenodd; /* Default value */
}
.shape.revert {
fill-rule: revert-layer;
}
</style>
<body>
<svg width="200" height="100">
<polygon points="50,0 100,100 0,100" class="shape" />
<polygon points="150,0 200,100 100,100" class="shape revert" />
</svg>
</body>
</html>
Output
Ví dụ về giá trị unset trong Fill-Rule
Thuộc tính fill-rule trong CSS giúp điều chỉnh cách tô màu các hình dạng phức tạp. Giá trị unset sẽ đặt lại thuộc tính này về giá trị kế thừa từ phần tử cha hoặc giá trị mặc định của trình duyệt. Nói cách khác, nó sẽ bỏ qua bất kỳ giá trị nào đã được đặt trực tiếp cho phần tử hiện tại. Điều này rất hữu ích khi bạn muốn sử dụng giá trị mặc định hoặc giá trị kế thừa từ bố cục chung. Việc sử dụng unset giúp code gọn gàng và dễ bảo trì hơn.
Cấu trúc
Fill-Rule: unset;
Ví dụ
<html>
<head>
<style>
.shape1 {
width: 100px;
height: 100px;
background-color: lightblue;
fill-rule: evenodd; /* Ví dụ fill-rule: evenodd */
}
.shape2 {
width: 100px;
height: 100px;
background-color: lightcoral;
fill-rule: nonzero; /* Ví dụ fill-rule: nonzero */
}
.shape3 {
width: 100px;
height: 100px;
background-color: lightgreen;
fill-rule: unset; /* unset sẽ kế thừa từ cha hoặc là giá trị mặc định */
}
.container {
display: flex;
}
</style>
</head>
<body>
<div class="container">
<svg class="shape1" viewBox="0 0 100 100">
<polygon points="50,10 90,90 10,90" />
</svg>
<svg class="shape2" viewBox="0 0 100 100">
<polygon points="50,10 90,90 10,90" />
</svg>
<svg class="shape3" viewBox="0 0 100 100">
<polygon points="50,10 90,90 10,90" />
</svg>
</div>
</body>
</html>
Output
Kết bài cho css Fill-Rule property
Tóm lại, thuộc tính fill-rule giúp bạn kiểm soát cách trình duyệt tô màu các hình dạng phức tạp, đặc biệt là những hình có đường viền chồng chéo. Việc lựa chọn giữa nonzero và evenodd phụ thuộc vào kết quả mong muốn: bạn muốn tô kín toàn bộ vùng hay chỉ tô những phần nằm trong số lẻ/chẵn các đường viền. Hiểu rõ thuộc tính này sẽ giúp bạn tạo ra những hình ảnh vector sắc nét và chính xác hơn. Hãy thử nghiệm với cả hai giá trị để thấy sự khác biệt nhé!