SVGとReactで可変サイズのフキダシ

この記事は グラフィックス全般 Advent Calendar 2023 21日目の記事です。

可変サイズにしてみた

旋回の続きで、SVGのフキダシをのサイズを可変にしてみました。

See the Pen アドベントカレンダー２０２３「SVGとReactで可変サイズのフキダシ」 by 柏崎ワロタロ (@warotarock) on CodePen.

やっていることは簡単で、インラインSVGのpathをテキストのdivに合わせサイズを調整して生成しています。

divのサイズはgetBoundingClientRectで取得しています。この関数で返ってくるサイズは単位がpxなのでSVG内でそのまま使うことができました。px以外の単位を使う場合はちょっと大変になるかもしれません。

まとめ

SVGでできることは多いですが、パスとテキストだけでも相当に使いでがあります。オススメです。