如何通过 CSS 更改 SVG 的大小

Question

我想自定义圆形 svg 的大小，但是，当我将字体大小设置为 300px 时，svg 的大小不会更改/更新。如何通过 css 更改此 svg 的大小？谢谢。

svg {
  font-size: 300px;
}

svg > circle {
  fill: red;
}

svg > path {
  fill: orange;
}

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50"/>
  <path d="M0,50 a1,1 0 0,0 100,0" />
</svg>

Answer 1

您想使用该scale命令。从CanIUse.com来看，除了 IE11 之外，这似乎在其他地方都适用。

svg {
  transform-origin: left top;
  transform: scale(3);
}

svg > circle {
  fill: red;
}

svg > path {
  fill: orange;
}

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50"/>
  <path d="M0,50 a1,1 0 0,0 100,0" />
</svg>

Answer 2

这是一种方法：在 SVG 上设置 viewBox 属性，以便它能够缩放到其容器。然后您在em's中设置该容器的宽度。这意味着它将根据您在容器上设置的字体大小进行缩放。

svg>circle {
  fill: red;
}

svg>path {
  fill: orange;
}

.svg-container {
  font-size: 300px;
  width: 4em;
  border: solid 1px red;
}

.alpha {
  font-size: 10px;
}

.beta {
  font-size: 20px;
}

.gamma {
  font-size: 100px;
}

<div class="svg-container alpha">
  10px
  <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50"/>
      <path d="M0,50 a1,1 0 0,0 100,0" />
    </svg>
</div>

<div class="svg-container beta">
  20px
  <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50"/>
      <path d="M0,50 a1,1 0 0,0 100,0" />
    </svg>
</div>

<div class="svg-container gamma">
  100px
  <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50"/>
      <path d="M0,50 a1,1 0 0,0 100,0" />
    </svg>
</div>