如何设置 svg 的宽度和高度？答案

【问题标题】：How to set svg width and height?如何设置 svg 的宽度和高度？
【发布时间】：2017-12-26 11:48:37
【问题描述】：

我有一个具有不同 viewBox 值的 3 svg 图标。

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16"></svg>
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"></svg>

我如何将我的 svg 宽度和高度设置为相同的值，所以所有这 3 个图标都将具有相同的大小。

<div>
    <span>
          <svg></svg>
    </span>
</div>

【问题讨论】：

大小一样怎么办？一样宽还是一样高？

标签： html css svg

【解决方案1】：

如果您给它们提供相同的width 和height，所有三个图标将缩放到相同的大小。较短的会自行居中。

svg {
  width: 50px;
  height: 50px;
  border-color: blue;
  background-color: yellow;
}

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16">
  <rect width="100%" height="100%"/>
</svg>
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%"/>
</svg>

如果“相同大小”是指相同高度。然后只设置height，让浏览器根据viewBox纵横比调整宽度。

svg {
  height: 50px;
  border-color: blue;
  background-color: yellow;
}

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16">
  <rect width="100%" height="100%"/>
</svg>
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%"/>
</svg>

【讨论】：

似乎如果 svg 实体中不存在 viewBox 属性（某些生成器会发生这种情况），这将不起作用。关于该主题的详细解释可以阅读：css-tricks.com/scale-svg