Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS paint-order Property

Posted in CSS Tutorial
Updated on Oct 07, 2024
By Mari Selvan
👁️ 10 - Views
⏳ 4 mins
💬 1 Comment
CSS paint-order Property

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
Copy To Clipboard
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

ValueDescription
fillPaints the fill of the SVG shape first.
strokePaints the stroke of the SVG shape.
markersPaints the markers of the SVG shape, such as arrowheads on lines.
normalDefault 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy