HTML&CSS · December 20, 2023

Css Basic: fill-rule

CSS Basics: fill-rule

CSS (Cascading Style Sheets) is a fundamental technology used for styling web pages. It allows developers to control the appearance of HTML elements, including colors, fonts, layouts, and more. One important CSS property is fill-rule, which determines how the interior of a shape is filled.

Understanding fill-rule

When working with SVG (Scalable Vector Graphics) or other vector-based graphics, shapes can overlap or intersect. The fill-rule property specifies how the browser determines which parts of the shape to fill and which parts to leave empty.

The fill-rule property accepts two values:

  • nonzero: This is the default value. It means that the browser fills any area that is crossed by the shape's outline an odd number of times.
  • evenodd: With this value, the browser fills any area that is crossed by the shape's outline an odd number of times with a solid color, and any area crossed an even number of times remains empty.

Examples

Let's take a look at some examples to understand how fill-rule works:

<svg width="200" height="200">
  <path d="M50 50 L150 50 L150 150 L50 150 Z" fill="red" fill-rule="nonzero" />
</svg>

In this example, we have a square shape defined by four lines. The fill-rule is set to nonzero. As a result, the entire area inside the shape is filled with the color red.

<svg width="200" height="200">
  <path d="M50 50 L150 50 L150 150 L50 150 Z" fill="blue" fill-rule="evenodd" />
</svg>

In this second example, we have the same square shape, but the fill-rule is set to evenodd. As a result, only the area inside the shape that is crossed an odd number of times by the outline is filled with the color blue. The area crossed an even number of times remains empty.

Conclusion

The fill-rule property in CSS is a powerful tool for controlling how shapes are filled in SVG and other vector-based graphics. By understanding the two available values, nonzero and evenodd, developers can create visually appealing and precise designs.

Learn More About Server.HK

If you are interested in VPS hosting services, Server.HK offers top-notch solutions. With reliable servers and excellent customer support, Server.HK is a trusted provider in the industry. Visit the Server.HK website to learn more about their hosting plans and features.

You may also like...