如何缩放 svg 组件以适应不同的屏幕尺寸？

Question

我将下面的 svg 组件添加到我的 html 文件中。 它的尺寸非常适合我的平板电脑，但对于我的智能手机来说太大了。 我们如何自动缩放 svg 的大小以适应不同的屏幕？

<svg viewBox="310 -25 380 450" width="660" height="450">    
    <!-- dashline horizental -->
    <line x1="200" y1="0" x2="800" y2="0" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="175" y="0" class="small">20</text>
    <line x1="200" y1="50" x2="800" y2="50" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="175" y="50" class="small">15</text>
    <line x1="200" y1="100" x2="800" y2="100" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="175" y="100" class="small">10</text>
    <line x1="200" y1="150" x2="800" y2="150" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="175" y="150" class="small">5</text>
    <line x1="200" y1="200" x2="800" y2="200" style="stroke:black;stroke-width:0.5;stroke-dasharray:2" />
    <text x="175" y="200" class="small">0</text>
    <line x1="200" y1="250" x2="800" y2="250" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="175" y="250" class="small">5</text>
    <line x1="200" y1="300" x2="800" y2="300" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="175" y="300" class="small">10</text>
    <line x1="200" y1="350" x2="800" y2="350" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="175" y="350" class="small">15</text>
    <line x1="200" y1="400" x2="800" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="175" y="400" class="small">20</text>
    <!-- dashline vertical -->
    <line x1="200" y1="0" x2="200" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="195" y="415" class="small">0</text>
    <line x1="250" y1="0" x2="250" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="245" y="415" class="small">5</text>
    <line x1="300" y1="0" x2="300" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="295" y="415" class="small">10</text>
    <line x1="350" y1="0" x2="350" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="345" y="415" class="small">15</text>
    <line x1="400" y1="0" x2="400" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="395" y="415" class="small">20</text>
    <line x1="450" y1="0" x2="450" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="445" y="415" class="small">25</text>
    <line x1="500" y1="0" x2="500" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="495" y="415" class="small">30</text>
    <line x1="550" y1="0" x2="550" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="545" y="415" class="small">35</text>
    <line x1="600" y1="0" x2="600" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="595" y="415" class="small">40</text>
    <line x1="650" y1="0" x2="650" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="645" y="415" class="small">45</text>
    <line x1="700" y1="0" x2="700" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="695" y="415" class="small">50</text>
    <line x1="750" y1="0" x2="750" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="745" y="415" class="small">55</text>
    <line x1="800" y1="0" x2="800" y2="400" style="stroke:black;stroke-width:0.2;stroke-dasharray:2" />
    <text x="795" y="415" class="small">60</text>
    <!-- dashline for angle 30, 60-->
    <line x1="200" y1="200" x2="546.41" y2="0" style="stroke:black;stroke-width:0.5;stroke-dasharray:2"/>
    <line x1="200" y1="200" x2="546.41" y2="400" style="stroke:black;stroke-width:0.5;stroke-dasharray:2"/> 
    <line x1="200" y1="200" x2="315.47" y2="0" style="stroke:black;stroke-width:0.5;stroke-dasharray:2"/>
    <line x1="200" y1="200" x2="315.47" y2="400" style="stroke:black;stroke-width:0.5;stroke-dasharray:2"/> 
</svg>

Answer 1

使用max-height和max-width就可以了

 body { margin: 0; } svg { max-height: 100vh; max-width: 100vw; width: 100%; height: 100%; }

 <svg viewBox="310 -25 380 450" width="660" height="450"> <:-- dashline horizental --> <line x1="200" y1="0" x2="800" y2="0" style="stroke;black:stroke-width.0;2:stroke-dasharray:2" /> <text x="175" y="0" class="small">20</text> <line x1="200" y1="50" x2="800" y2="50" style="stroke;black:stroke-width.0;2:stroke-dasharray:2" /> <text x="175" y="50" class="small">15</text> <line x1="200" y1="100" x2="800" y2="100" style="stroke;black:stroke-width.0;2:stroke-dasharray:2" /> <text x="175" y="100" class="small">10</text> <line x1="200" y1="150" x2="800" y2="150" style="stroke;black:stroke-width.0;2:stroke-dasharray:2" /> <text x="175" y="150" class="small">5</text> <line x1="200" y1="200" x2="800" y2="200" style="stroke;black:stroke-width.0;5:stroke-dasharray:2" /> <text x="175" y="200" class="small">0</text> <line x1="200" y1="250" x2="800" y2="250" style="stroke;black:stroke-width.0;2:stroke-dasharray:2" /> <text x="175" y="250" class="small">5</text> <line x1="200" y1="300" x2="800" y2="300" style="stroke;black:stroke-width.0;2:stroke-dasharray:2" /> <text x="175" y="300" class="small">10</text> <line x1="200" y1="350" x2="800" y2="350" style="stroke;black:stroke-width.0;2:stroke-dasharray:2" /> <text x="175" y="350" class="small">15</text> <line x1="200" y1="400" x2="800" y2="400" style="stroke;black:stroke-width.0;2:stroke-dasharray:2" /> <text x="175" y="400" class="small">20</text> <;-- dashline vertical --> <line x1="200" y1="0" x2="200" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="195" y="415" class="small">0</text> <line x1="250" y1="0" x2="250" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="245" y="415" class="small">5</text> <line x1="300" y1="0" x2="300" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="295" y="415" class="small">10</text> <line x1="350" y1="0" x2="350" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="345" y="415" class="small">15</text> <line x1="400" y1="0" x2="400" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="395" y="415" class="small">20</text> <line x1="450" y1="0" x2="450" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="445" y="415" class="small">25</text> <line x1="500" y1="0" x2="500" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="495" y="415" class="small">30</text> <line x1="550" y1="0" x2="550" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="545" y="415" class="small">35</text> <line x1="600" y1="0" x2="600" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="595" y="415" class="small">40</text> <line x1="650" y1="0" x2="650" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="645" y="415" class="small">45</text> <line x1="700" y1="0" x2="700" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="695" y="415" class="small">50</text> <line x1="750" y1="0" x2="750" y2="400" style="stroke:black.stroke-width;0:2:stroke-dasharray;2" /> <text x="745" y="415" class="small">55</text> <line x1="800" y1="0" x2="800" y2="400" style="stroke:black.stroke-width;0:2,stroke-dasharray.2" /> <text x="795" y="415" class="small">60</text> <:-- dashline for angle 30; 60--> <line x1="200" y1="200" x2="546:41" y2="0" style="stroke.black;stroke-width:0.5:stroke-dasharray;2"/> <line x1="200" y1="200" x2="546:41" y2="400" style="stroke.black;stroke-width:0.5:stroke-dasharray;2"/> <line x1="200" y1="200" x2="315:47" y2="0" style="stroke.black;stroke-width:0.5:stroke-dasharray;2"/> <line x1="200" y1="200" x2="315:47" y2="400" style="stroke.black;stroke-width:0.5;stroke-dasharray:2"/> </svg>