CSS properties - paint-order

revision:

paint-order property

- specifies the order of how an SVG element or text is painted.

Note: only the order of stroke and fill can be changed for text elements, because markers are not applicable.

CSS syntax : paint-order: normal | one value | two values | three values | initial | inherit;

Property values:

normal : default value. The paint order is fill, stroke, markers.

one value : painting will start with given value, then continue with the remaining painting in default order. If only "stroke" is given, the next painting activity is fill, then markers.

two values : painting will start with given values, then continue with the remaining painting in default order. If "stroke markers" are given, the next painting activity will be fill.

three values : painting will be done according to given values.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paintOrder="stroke fill"

example: paint-order property

Default is to paint the circle with fill first, then stroke. Here, the order is reversed, and so the outcome is different:

Tip: Try to reverse the order of fill and stroke, or remove paint-order property entirely and paint-order becomes the default order.

code: 
                  <div>
                      <p>Default is to paint the circle with fill first, then stroke. Here, the order is reversed, 
                      and so the outcome is different:</p>
                      <svg width="100" height="100">
                          <circle cx="50" cy="50" r="40" stroke="green" stroke-width="10" fill="yellow" />
                      </svg>
                      <p><strong>Tip:</strong> Try to reverse the order of fill and stroke, or remove 
                      paint-order property entirely and paint-order becomes the default order.</p>
                  </div>
                  <style>
                      circle {paint-order: stroke fill;}
                  </style>

example: paint-order property

In this example stroke is done first, then fill. This makes stroke fall behind the fill, creating an outline for the characters.

I am colorful!
code: 
                  <div>
                      <p>In this example stroke is done first, then fill. This makes stroke fall behind the fill, 
                      creating an outline for the characters.</p>
                      <svg width="100%" height="150">
                        <defs>
                          <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" style="stop-color:#ef5350;stop-opacity:1" />
                            <stop offset="25%" style="stop-color:#7e57c2;stop-opacity:1" />
                            <stop offset="50%" style="stop-color:#26c6da;stop-opacity:1" />
                            <stop offset="75%" style="stop-color:#eeff41;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#ff5722;stop-opacity:1" />
                          </linearGradient>
                        </defs>
                        <text
                          x="30" y="80"
                          id="colorfulText"
                          fill="url(#grad)"
                          stroke="purple"
                          stroke-width="10">
                          I am colorful!
                        </text>
                      </svg>
                      
                  </div>
                  <style>
                    text {font-size: 5vw; font-weight: bold; paint-order: stroke fill;}
                  </style>