2

パス上のテキスト (スクリーンショットを参照) を拡張して、textPath 全体に沿うようにするにはどうすればよいですか?

method属性値を使用してみましたstretchが、期待どおりに機能しません。パスに沿ってテキストが引き伸ばされません。

これをすべてのブラウザで機能させる方法はありますか?

4

1 に答える 1

3

textPath全体にテキストを広げる方法は、textLength属性を使用することです。の適切な値を計算する方法については、この他の質問も参照してくださいtextLength。方法は次のとおりです。

<svg viewBox="0 0 500 300" version="1.1">
     <defs>
         <path id="s3" d="M 10,90 Q 100,15 200,70" />
     </defs>
     <text font-size="20">
         <textPath xlink:href="#s3" textLength="205">
           Short text
         </textPath>
     </text>
     <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/>
 </svg>

表示可能な例：http：//jsfiddle.net/zkZ2n/

ここに画像の説明を入力してください

これがサポートしていないFirefoxのバグレポートですtextLength：https ：//bugzilla.mozilla.org/show_bug.cgi？id = 569722

于 2012-11-27T14:54:55.540 に答える