Question

我有一个带有不同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>

Answer 1

如果您为同一个width和height提供相同尺寸，则所有三个图标都会缩放到相同的尺寸。较短的一个将以自己为中心。

＆＃13;

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

＆＃13;

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

＆＃13;

如果，通过＆＃34;相同的尺寸＆＃34;，则表示相同的高度。然后只需设置height，然后让浏览器根据viewBox纵横比调整宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: