文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何缩放svg组件以适应不同的屏幕大小？

问如何缩放svg组件以适应不同的屏幕大小？
EN

Stack Overflow用户
提问于 2022-08-12 06:47:16
回答 1查看 89关注 0票数 1

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

代码语言：javascript
复制
<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>
javascript
html
css
ionic3
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-12 07:05:43

使用max-height和max-width就可以做到

​

代码语言：javascript
复制
body {
  margin: 0;
}

svg {
  max-height: 100vh;
  max-width: 100vw;
  width: 100%;
  height: 100%;
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73330220

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档