xml - コンテナに合わせてテキストを SVG スケーリングする

Question

これはおそらく非常に単純な質問ですが、SVG のテキストをコンテナーに合わせて引き伸ばすにはどうすればよいでしょうか?

長すぎたり高すぎたりして見栄えが悪くてもかまいませんが、コンテナに収まり、できるだけ大きくする必要があります.

ありがとう

Answer 1

テキストが醜くなることを本当に気にしない場合は、未知の長さのテキストを既知の幅に合わせる方法を次に示します。

<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>

Answer 2

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

「viewBox」</a> と「preserveAspectRatio」</a> 属性を使用しました。

<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>

私が見た他のリソース：

• SVG viewBox の狂気を理解する
• CSS を使用してスケーラブルなベクター グラフィックスのスタイルを設定する方法