SVG のベジエ曲線パスに沿ってテキストをレンダリングしようとしています。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id='menu_path' d="M 80,40 Q 200,85 245,205" stroke="none" fill="none"/>
<text fill="white">
<textPath xlink:href="#menu_path">News Info Presse Musik</textPath>
</text>
</svg>
Firefox では問題なく動作しますが、Chrome と Safari ではテキストが見苦しくなります ("Musik" を見てください)。等幅フォントを使用してテキストを大文字に設定しても、変更されません。
ここにスクリーンショット:
- http://imageshack.us/a/img18/3195/svgrendering.png
- http://imageshack.us/a/img705/7334/svgrenderingwithpath.png
誰かがこれを回避する方法について考えを持っていますか?
問題を示すjsfiddleを作成しました:
ありがとうございました!