この記事は グラフィックス全般 Advent Calendar 2023 21日目の記事です。
可変サイズにしてみた
旋回の続きで、SVGのフキダシをのサイズを可変にしてみました。
See the Pen アドベントカレンダー２０２３「SVGとReactで可変サイズのフキダシ」 by 柏崎ワロタロ (@warotarock) on CodePen.
やっていることは簡単で、インラインSVGのpathをテキストのdivに合わせサイズを調整して生成しています。
divのサイズはgetBoundingClientRectで取得しています。この関数で返ってくるサイズは単位がpxなのでSVG内でそのまま使うことができました。px以外の単位を使う場合はちょっと大変になるかもしれません。
まとめ
SVGでできることは多いですが、パスとテキストだけでも相当に使いでがあります。オススメです。