7

SVG 'rect' 要素内に収まる SVG 'text' 要素を取得しようとしています。たとえば、以下の例では、フォント サイズが 100px の 5 文字のモノスペース テキストを使用し、テキストの近くに外接する四角形があることを期待していました。

しかし、テキストの右側に空白があります。

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="1000">
    <text x="10px" y="110px" style="font-family:monospace;font-size:100px;">HELLO</text>    
    <rect x="10px" y="10px" width="500px" height="100px" style="stroke:blue;fill:none;"/> 
</svg>

「テキスト」要素にはどの CSS セレクターを使用すればよいですか?

注: text-on-a-path メソッドは使用したくありません。固定サイズの単なるフォント。

ありがとう;

4

1 に答える 1

8

フォントのサイズは、幅ではなく高さを決定します。文字が正方形になることはめったにありません。

私の知る限り、等幅テキストの幅を CSS で確実に決定する方法はありません。

CSS3 には、文字の幅を表すch単位があります。0これは等幅テキストで機能します。ただし、SVG ではサポートされていません。

もちろん、固定幅をピクセル単位で設定することもできます。私には 300 ピクセルの幅が適しています。しかし、他の誰かが別の等幅フォントを使用している場合、固定幅がオフになる可能性があります。も追加するfont-family:monospace;font-size:100px;と<rect>、長方形の幅を s で設定できますem。しかし、それはこれ以上信頼できるものではないと思います。

ただし、スクリプトを使用することはできます。テキスト要素getComputedTextLength()のテキストの長さを取得するために使用できます。

<script type="text/javascript">
document.getElementById('rect').setAttribute(
    'width',
    document.getElementById('text').getComputedTextLength()
);
</script>

それを SVG の最後に追加する (そして適切な要素 ID を追加する) ことは、少なくとも Opera 10、Firefox 3.5、および Safari 4.0 で機能します。

またgetBBox()、フォント サイズを変更する場合に備えて、テキスト要素の境界ボックスを取得するために使用することもできます。これにより、四角形の高さをフォント サイズに合わせて設定することもできます。

于 2009-11-14T01:13:39.083 に答える