sasensi
commented
4 years ago As a note if someone needs this before it is implemented, we can achieve the same effect by having two separated elements on top of each other: one for the stroke positioned below and one for the fill positioned above.
Here is a sketch demonstrating this.
Description/Steps to reproduce
Feature Request: Add support for css property 'paint-order'.
By default the fill is painted first and then stroke is added on top. Supporting the paint-order property would allow the stroke to be drawn first and then the fill on top. This feature helps preserve the shape of an element when there is a large amount of stroke compared to the size of the element. For instance a large stroke added to text can cause the stroke to completely fill over the text.
This issue can be seen in an example from mozilla. https://mdn.mozillademos.org/en-US/docs/Web/CSS/paint-order$samples/Examples?revision=1530134
Link to reproduction test-case
http://sketch.paperjs.org/#V/0.12.3/S/7ZPfTsIwFMZfpekVRFmHSJTx59YbvCIxJo5A6Y6sWdcubWUQ47t7OhgSQ3wC776v/fWcnG9nn1TzEmhCFwV4kdNbKkwWvAJPFD+AJVOioSbzoDvdVKc6XLndduU81xm3GRLrCR6QUMpVXMA0pbn3VcJYXddRPYiM3bLX5znrj0aP7IyllOxLpd1V/C6OY4ZVWyjZK6mLqyhWHbHmGuEdWCeNRrAf9dHXMvN5cMMYXQ5ym/vWziZCWqGAiD0ePQwREIdWWRT3QbxLpVBbyNA4b00RBtyoDzj7XttlEJpUXGrfMzaDUONINFVCR3ZsiQKHm61/4mx4+E/zV5pXEku1MNphaqcFXEkPJebW7Gsky8pYv3h56lwuaXfcvjrl/NejExLepPqSjyrjpMdAogO5mRIce4y/zMYCLyqDH93R5G359Q0=
In the sketch above the two circles should look different and exporting the svg from paperjs should preserve the css property.
Additional information
https://svgwg.org/svg2-draft/painting.html#PaintOrder https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order https://caniuse.com/#feat=mdn-css_properties_paint-order