有没有办法让 svg 自动缩放到里面的圆的大小？之类的东西什么的。目前我给 svg 一个尺寸，给圆一个尺寸。这导致它们不匹配(我不想每次都手动尝试匹配)。
看看蓝色背景如何比圆圈大。我知道我可以只改变高度和宽度，但是根据圆的大小进行这种改变会很好。我只想更改一个元素，而不是同时匹配这两个元素。
.divOrangeCircles {
display: inline-block;
background-color: aqua;
opacity: 0.5;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="divOrangeCircles"><svg height="200" width="200"><circle cx="90" cy="90" r="90" fill="#F48043"/></svg></div>
</body>
</html>最佳答案
你想要的是viewBox='x y width height'属性，它将定义您的 SVG 绘图的 View 框。
SVG 单位(通常)相对于其父框，通过设置 viewBox 属性，您可以定义您的 SVG 应显示多少单位。
.divOrangeCircles {
display: inline-block;
background-color: aqua;
opacity: 0.5;
}
svg {
display: block;
}<div class="divOrangeCircles">
<svg viewBox="0 0 180 180" height="200" width="200">
<circle cx="90" cy="90" r="90" fill="#F48043"/>
</svg>
</div>关于HTML/CSS svg 自动高度和宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48878824/