SVGのtextのstroke-widthのアレをpaint-orderで解決メモ

svgのtextに対するstroke-widthの嫌な挙動とその対処。

まずは基本。こんな感じでstroke-width使います。

<svg>
  <text x="50" y="100" stroke-width="1px" style="font: bold 50px Meiryo UI; stroke: black; fill: white;">
    test
  </text>
</svg>

表示は以下の通り。画像じゃないよ。ドラッグしてみ。

さて、stroke-widthの値を上げると、すぐ嫌な状態になります。
以下はstroke-widthが6pxになったこと以外は上と同じ。

<svg>
  <text x="50" y="100" stroke-width="6px" style="font: bold 50px Meiryo UI; stroke: black; fill: white;">
    test
  </text>
</svg>

で、こうなります。

幅の表現は境界線の外側だけではなく、内側も使います。字が潰れる！

で、どう対処するかというと、塗る順番を変えます。外枠の黒線と、内側の白塗り。
paint-orderという便利なヤツがいます。

<svg>
  <text x="50" y="100" stroke-width="6px" paint-order="stroke" style="font: bold 50px Meiryo UI; stroke: black; fill: white;">
    test
  </text>
</svg>

結果！

神！ ちなみに、もちろん表示されている幅は、実質3px(くらい？)になります。そこは少し嫌な感じ。

おまけ。15px。

オレオ感。

※追記あり