Run ❯
×
Change Orientation
Change Theme, Dark/Light
<!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>