El atributo paint-order
Cuando creamos una forma geométrica en SVG, si utilizamos líneas muy anchas, podemos observar que la línea, que sigue la forma como un borde, se extiende tanto hacia el interior como hacia el exterior. En el siguiente ejemplo el circulo tiene un borde ( stroke ) semitransparente de 20 unidades de usuario. Siendo semitransparente podemos ver claramente como el relleno ( fill ) y el borde ( stroke ) se solapan en parte. La zona donde el fill y el stroke se solapan aparece más oscura.
De alguna manera podemos decir que el stroke "se come" parte del relleno ya que por defecto el borde ( stroke ) es dibujado encima del relleno ( fill ). A veces esto es lo que queremos, otras veces no.
El atributo paint-order controla el orden en el cual son pintados estos componentes y toma como valor una lista de palabras clave.
El valor por defecto de paint-order es fill stroke marker
paint-order = "fill stroke marker"
Esto quiere decir que el primer componente a dibujar es el fill seguido del stroke y de los marcadores. Si omitimos alguna de estas palabras clave, los componentes que faltan serán pintados en el orden por defecto después de pintar los componentes especificados. Por ejemplo si paint-order = "stroke" , primero será pintado el borde ( stroke ), seguido por el relleno ( fill ) y los marcadors.
El atributo paint-order está soportado en todos los navegadores modernos excepto Internet Explorer.
See the Pen SVG paint-order*** by Gabi (@enxaneta) on CodePen.