CSS paint-order Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The paint-order property in CSS is used to control the order in which the fill, stroke, and markers of SVG graphics are painted.

This property is particularly useful when you want to ensure that certain elements of your SVG are rendered in a specific sequence, which can affect the visual appearance and layering of the graphic.

💡 Syntax

The syntax for the paint-order property allows you to specify the order of painting for the fill, stroke, and markers.

Syntax

Copied

element {
  paint-order: [ fill || stroke || markers ];
}

Each of the values (fill, stroke, markers) can be used in any order and can be omitted if not needed.

🎛️ Default Value

The default value of the paint-order property is normal, which paints the fill first, then the stroke, and finally the markers.

🏠 Property Values

Value	Description
fill	Paints the fill of the SVG shape first.
stroke	Paints the stroke of the SVG shape.
markers	Paints the markers of the SVG shape, such as arrowheads on lines.
normal	Default painting order of fill, stroke, and markers.

📄 Example

In this example, we'll change the paint order of an SVG rectangle so that the stroke is painted before the fill.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS paint-order Example</title>
  <style>
    svg rect {
      paint-order: stroke fill;
      stroke: blue;
      fill: lightblue;
      stroke-width: 5;
    }
  </style>
</head>
<body>
  <h1>SVG Rectangle with Custom Paint Order</h1>
  <svg width="200" height="200">
    <rect x="50" y="50" width="100" height="100"></rect>
  </svg>
</body>
</html>

🖥️ Browser Compatibility

The paint-order property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The paint-order property is a valuable tool for web developers working with SVG graphics.

By controlling the painting order of fill, stroke, and markers, you can achieve precise visual effects and ensure that your graphics are rendered exactly as intended. Experiment with different painting orders to see how this property can enhance the appearance of your SVG elements.