paint-order | Properties | CSS

The paint-order CSS property specifies the order for the three paint operations: fill, stroke and markers.

Syntax

CSS

paint-order: value;

JS

object.style.paintOrder = "value";

Values

<'paint-order'> = normal | [ fill || stroke || markers ]

normal

Paint order is fill, stroke, markers.

fill

Fill is painted in the order given from left to right. If omitted, it is painted last in normal order.

stroke

Stroke is painted in the order given from left to right. If omitted, it is painted last in normal order.

markers

Markers are painted in the order given from left to right. If omitted, it is painted last in normal order.

Initial

normal

<!doctype html>
<html>
<head>
    <style>
        path
        {
             marker-end: url(#myid);
             marker-mid: url(#myid);
             marker-start: url(#myid);
        }
        path, text
        {
            fill: blue;
            stroke: red;
            stroke-width: 10px;
        }
        text
        {
            dominant-baseline: middle;
            font-size: 200px;
            text-anchor: middle;
        }
    </style>
    <script>
        function myfunction(myvar)
        {
            var elements = document.querySelectorAll("path, text");
            for(var element of elements)
            {
                element.style.paintOrder = myvar;
            }
        }
    </script>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">fill</button>
    <button onmouseover="myfunction(innerHTML)">markers</button>
    <button onmouseover="myfunction(innerHTML)">normal</button>
    <button onmouseover="myfunction(innerHTML)">stroke</button>
    <svg height="100%" width="100%">
        <defs>
            <marker id="myid" markerHeight="20" markerWidth="20" orient="auto" viewBox="-10 -10 20 20">
                <polygon points="-10,-10 10,0 -10,10"/>
            </marker>
        </defs>
        <svg viewBox="0 0 1000 1000">
            <path d="M100,100 L100,900 L900,900 L900,100 z"/>
        </svg>
        <text x="50%" y="50%">paint-order</text>
    </svg>
</body>
</html>

Links

World Wide Web Consortium (W3C)

Syntax

CSS

JS

Values

Initial

Examples

fill

markers

normal

stroke

JS

Links