add paint-order support

[zhiqingchen]

Feature Request

add paint-order attribute

Why it is needed

The paint-order attribute specifies the order that the fill, stroke, and markers of a given shape or text element are painted.

Possible implementation

Maybe change the paint order when drawing?

Code sample

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
    <stop stop-color="#888"/>
    <stop stop-color="#ccc" offset="1"/>
  </linearGradient>
  <rect width="400" height="200" fill="url(#g)"/>
  <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round"
     text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold">
    <text x="200" y="75">stroke over</text>
    <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</text>
  </g>
</svg>

[masterRokshi]

+1, this would be super great

[ajarian]

Adding another +1, trying to create outlined text right now and I'm hitting a wall without support for this prop 🙏

[shaquibimdad]

+1