html - 如何通过 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>