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

前回の記事の最後のオレオ。testじゃなくてAとかWとか入れてみると…

なんだこのツンツンは…

stroke-linejoinでエッジ部分の描画方法決めれるみたいです。roundって丸そう。

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

オレオ感なくなったけど、トゲトゲなくなったよ。