Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> circle { paint-order: stroke fill; } </style> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4638549725433695" crossorigin="anonymous"></script><script src="//www.p2hp.com/tj.js"></script></head> <body> <h1>paint-order: stroke fill</h1> <p>Default is to paint the circle with fill first, then stroke. Here, the order is reveresed, 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> </body> </html>
