CODEWITHSUNDEEP
csssvg
Seregmir
Seregmir

Reputation: 546

SVG issues with the CSS paint-order attribute

After designing a product on a HTML canvas (for reference build with fabricjs), the canvas is exported to an SVG. One of the options is to add text and style it. When you give the text a stroke and export I keep running into a rendering issue between the canvas output and the svg output (see images below).

After some research i found out that this part is the issue paint-order="stroke", apperantly this is not supported by all browsers or svg viewers. Does anyone know a way to make this working (preferably everywhere).

enter image description hereenter image description here

Upvotes: 1

Views: 483

Answers (1)

Waruyama
Waruyama

Reputation: 3533

You will somehow have to paint the path twice, first only the stroke, then only the fill.

This can be done either by inserting the path twice (first with no fill, then with no stroke) or by defining the path in a <defs> element and then inserting it twice via the <use> element.

Here is an example with adding the path twice:

body {
  background: grey;
}
<svg width="200" height="200" viewBox="0 0 200 200" >
  <path  stroke="white" stroke-width="20" d="M50 50 h 100 v 100 h -100 v -100z" />
  <path fill="green" d="M50 50 h 100 v 100 h -100 v -100z" />
</svg>

And here is an example with the path in a <defs> element:

body {
  background: grey;
}
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200" >
  <defs>
    <path id="path1" d="M50 50 h 100 v 100 h -100 v -100z"/>
  </defs>
  <use stroke="white" stroke-width="20" xlink:href="#path1" />
  <use fill="green" xlink:href="#path1" />  
</svg>

Upvotes: 1

Related Questions