Проблемы SVG с атрибутом порядка рисования CSS

Question

После разработки продукта на холсте HTML (для справочной сборки с fabricjs ) холст экспортируется в SVG. Один из вариантов - добавить текст и оформить его. Когда вы даете тексту обводку и экспорт, я продолжаю сталкиваться с проблемой рендеринга между выводом canvas и выводом svg (см. Изображения ниже).

После некоторого исследования я обнаружил, что эта часть является проблемой paint-order="stroke", к сожалению, это поддерживается не всеми браузерами или программами просмотра svg. Кто-нибудь знает способ заставить это работать (желательно везде).

Answer 1

Вам как-то придется рисовать путь дважды, сначала только штрих, затем только заливку.

Это можно сделать, вставив путь дважды (сначала без заливки, затем без обводки) или определив путь в элементе <defs>, а затем вставив его дважды с помощью элемента <use>.

Вот пример с добавлением пути дважды:

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>

А вот пример с путем в элементе <defs>:

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>