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

Question

我有三个不同视口(viewBox)值的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的宽度和高度为相同的值，以便这三个图标都具有相同的大小。

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

- User1979

---

同样的大小怎么样？是相同的宽度还是相同的高度？ - Paul LeBeau

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>

如果你所说的“同样大小”是指高度相同，那么只需要设置height，让浏览器根据视窗的宽高比自动调整宽度即可。

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>

- Paul LeBeau

---

似乎如果SVG实体中没有viewBox属性（这在某些生成器中会发生），则此方法无法正常工作。有关此主题的详细说明，请参阅：https://css-tricks.com/scale-svg/ - arauzo