こんにちは、ワタナベです。
今回は、SVGでパスにテキストを沿わせる方法についての備忘録です。
テキストが切れたり、位置が意図した場所にならなかったり……もうだめかと思ったときに解決策にたどり着きました。
See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.
上が切れてしまうパターン、下がうまく行ったパターンです。
何が違うかというと、SVGを書き出すときに、テキストが入るスペースを確保してるかしてないかの違いです。
上はテキストを入れる余白を確保せず書き出しています。
下のパターンは下記のようにスペースを確保して書き出しています。
これでテキストが切れる問題は解決です。
テキストの位置は、textPathに「startOffset=”50%” text-anchor=”middle”」を付与します。
これでパスの中央にテキストが配置されます。
（パスの形によっては意図しない配置になってしまうかもしれませんが、その時は都度調整…）
▼THANKS！
それではまた次回。
ご閲覧ありがとうございました(^^♪
