html 使用svg矢量图时无法 调整宽高问题解决，不能像图片一样设置宽高比例问题
在HTML中使用SVG时，你可以通过两种方式调整宽高比例：
- 使用CSS直接设置SVG的宽高比例。
- 在SVG文件内部定义视口（viewBox）和宽高比例。
方法1：CSS设置宽高
<style>
.responsive-svg {
width: 100px; /* 设置宽度 */
height: 50px; /* 设置高度 */
}
</style>
<svg class="responsive-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50">
<!-- SVG内容 -->
</svg>方法2：内部定义viewBox
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px" viewBox="0 0 100 50">
<!-- SVG内容 -->
</svg>在这两种方法中，SVG会根据设置的宽度和高度按比例缩放内容。如果你需要保持图形的宽高比例不变，你应该只设置width或height中的一个，然后浏览器会自动计算另一个维度以保持比例。如果同时设置两个维度，SVG内容可能会被拉伸以适应新的宽高比。
评论已关闭