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

Question

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

<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>

Answer 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>

如果“相同尺寸”是指相同高度。然后只需设置heightonly，让浏览器根据 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>