[解決済み] <svg> viewBox属性を使用するには？

質問

svgを公式ドキュメントで勉強しているのですが、そのような行があります。私はそれがすでに持っている場合、それを得ることはありません。 width と height 属性で指定したのであって viewBox="0 0 1500 1000" ? 1px単位は1ユーザ単位に等しいと定義されています。従って、"5px" の長さは、公式ドキュメントにある "5"" の長さと同じで、この viewBox は幅 1500px、高さ 1000 のビューであり、300px、200px を超えていることになる。では、そもそもなぜ幅と高さの値を定義しているのでしょうか？

 <svg width="300px" height="200px" version="1.1"
         viewBox="0 0 1500 1000" preserveAspectRatio="none"
         xmlns="http://www.w3.org/2000/svg">

どのように解決するのですか？

幅と高さは <svg> の大きさです。ビューボックスはそのコンテンツがどのように表示されるかを制御するので、viewBox="0 0 1500 1000"は <svg> 要素のコンテンツを 5 倍に縮小し (1500 / 300 = 5 および 1000 / 200 = 5)、コンテンツはビューボックスなしの場合の 1/5 のサイズになりますが <svg>

伸縮性のある表面があり、それを 4 等分の断片にカットしたと想像してください。3つのピースを捨てると、元の表面の4分の1の大きさの表面ができます。次に、表面を伸ばして元の表面と同じサイズにすると、表面上のすべてのものが 2 倍のサイズになります。これがviewBoxとwidth/heightの関係です。