Proposals/Paint order

From SVG

This is a proposal for a property that controls the painting order of the components of an SVG graphics element. I very often want to paint a shape's stroke beneath its fill! I'm not convinced that sticking this into the vector-effect property is the right way forward. I think having a separate property like this is more readable. (What if you wanted both non-scaling-stroke and stroke beneath fill?)

Name: paint-order
Value: normal | [ fill || stroke || markers ] | inherit
Initial: normal
Applies to: SVG graphics elements and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified

"normal" means the same as "fill stroke markers" for SVG elements. I think it makes sense to have this "normal" keyword in case the property is broadened later to apply to other elements (like CSS boxes).

If any of "fill", "stroke" and "markers" are left out, then they are applied after the specified parts in their default order. So paint-order="markers" has the same rendering behaviour as paint-order="markers fill stroke".

  • Should this affect hit testing?