コンテナに完全に収まるように拡大縮小され、縦横比を無視して縦横に伸縮するSVGまたはHTMLテキスト

Question

コンテナを塗りつぶすために、テキストを両方の次元で自動的に伸ばす必要があります。それは歪むでしょう。

これは赤

におけるコンテナのスペースを示しこれは、長い名前は、通常、そのスペースに入れてサイズを変更し、アスペクト比
を維持するだろうかを示しています。

これは私のクライアントが何をしたいのかを示しています です。

私はSVGを使いたいと思っていますが、私はうまく動作します。

私は自分の能力を最大限に引き出すために解決策を探しましたが、ページやビューボックスが寸法を変更したときに、アスペクト比の維持やテキストの伸びを指しているようです。

Answer 1

あなたのテキストはすでにSVGの一部（それはあなたの例で表示される）である場合、あなたはおそらく意志ネストされた<svg>要素を使用する必要があります。

<svg width="400" height="400"> 
 

 
    <rect width="400" height="400" fill="rebeccapurple"/> 
 
    
 
    <!-- rect representing area that our text has to squeeze into --> 
 
    <rect x="20" y="50" width="200" height="50" fill="white"/> 
 

 
    <!-- x y width height match above rect --> 
 
    <!-- viewBox values need to match text bounds --> 
 
    <svg x="20" y="50" width="200" height="50" 
 
     viewBox="0 8 244 28" preserveAspectRatio="none"> 
 

 
    <text x="0" y="35" font-family="Verdana" font-size="35"> 
 
     HELLO THERE 
 
    </text> 
 
    </svg> 
 
    
 
</svg>

最も難しい部分は、viewBoxの正しい値をworkoingれます。それは（通常のスクイズされていない）テキストの境界に一致する必要があります。

Answer 2

これは非常に広い質問ですが、はい、あなたはsvgでそれを行うことができます。私はあなたが噛み砕くために何も提供していないので、それを実装させます。

キーポイントは、あなたのSVGのpreserveAspectRatio"none"に設定することです：

svg{ 
 
    height: 100vh; 
 
    width: 50vw; 
 
    } 
 
body{ 
 
    margin:0; 
 
    }

<div> 
 
<svg xmlns="http://www.w3.org/2000/svg" 
 
    viewBox="0 0 300 40" preserveAspectRatio="none"> 
 

 
    <text x="0" y="35" font-family="Verdana" font-size="35"> 
 
    Hello, out there 
 
    </text> 
 
</svg> 
 
</div>