web-dev-qa-db-ja.com

コンテナーに合わせてSVGスケーリングテキスト

これは非常に単純な質問のようですが、コンテナに合わせてSVGのテキストを拡大するにはどうすればよいですか？

長すぎたり高すぎたりして醜く見えてもかまいませんが、コンテナにフィットし、できるだけ大きくする必要があります。

ありがとう

xmlxhtmlsvgviewbox
32
Tom

テキストが見苦しくなってもかまわない場合は、不明な長さのテキストを既知の幅に合わせる方法を次に示します。

<svg width="436" height="180"
    style="border:solid 6px"
    xmlns="http://www.w3.org/2000/svg">
    <g>
        <text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
    </g>
</svg>

enter image description here

21
Bemmu

これが私が思いついたものです...他の人が投稿したものと似ていますが、サイズ変更とスケーリングがうまくいくと思います。このコードは、約10〜25文字のテキストに間隔を追加して、親の幅全体を埋めます。長いまたは短いテキストが必要な場合は、viewBoxのwidth属性とtextLength属性を調整するだけです。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox='0 0 300 24'>
<text textLength='290' lengthAdjust="spacing" x='5' y="14" >
    Some Unknown Text that is resizing
</text>
</svg>
12
DiggityDug

多分これはあなたのために働くかもしれません。値を微調整する必要がありますが、親divのサイズが変更されるとサイズが変更されます。 これは私のダブレットの例です。 fittext.jsと同様に機能します

‘viewBox’ ＆ ‘preserveAspectRatio’ 属性を使用しました。

<svg><text x="50%" y="50%" dy=".3em">Look, I’m centered!</text></svg>
<svg viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet"><text font-size="16" dy=".3em" >I’m also resizeable!</text></svg>

私が調べた他のリソース：

10
Stoikerty