<!DOCTYPE html>
<html>
<head>
<style>
#star {
fill: lime;
fill-rule: evenodd;
stroke: purple;
stroke-width: 8px;
paint-order: markers stroke fill;
}
</style>
</head>
<body>
<h1>The paint-order Property</h1>
<p>Normal paint order is fill, stroke, markers.</p>
<svg width="250" height="250">
<marker
id="dot"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="5"
markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
<polygon
id="star"
points="120,30 60,218 210,98 30,98 180,218"
marker-mid="url(#dot)"
marker-end="url(#dot)"/>
</svg>
</body>
</html>