设置 svg 宽高的正确姿势 —— viewBox

Lyrelion

已于 2022-02-20 00:28:09 修改

阅读量1.6w

点赞数 2

分类专栏： H5C3 文章标签： svg viewBox

于 2020-12-18 09:09:36 首次发布

本文链接：https://blog.csdn.net/Lyrelion/article/details/111352073

版权

H5C3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

问题

分析

解决

问题

想把 svg 的尺寸换成 25px*25px，但设置 width 和 height 属性后没用

分析

给 svg 设置 viewBox属性 才能设置尺寸

viewBox="x, y, width, height"

x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

解决

    <!-- 从左到右 -->  
    <svg width="200" height="150" style="border: 1px solid #cd0000">
      <rect width="200" height="150" fill="yellow" />
    </svg>

    <svg width="200" height="150" viewBox="0,0,400,300" style="border: 1px solid #cd0000">
      <rect width="200" height="150" fill="yellow" />
    </svg>

    <svg width="400" height="150" viewBox="0,0,400,300" style="border: 1px solid #cd0000">
      <rect width="200" height="150" fill="yellow" />
    </svg>

    <svg width="200" height="150" viewBox="0,0,100,75" style="border: 1px solid #cd0000">
      <rect width="200" height="150" fill="yellow" />
    </svg>