极客笔记CSS 如何使用百分比设置 SVG 的宽度和高度
在本文中，我们将介绍如何使用 CSS 中的百分比值来设置 SVG 的宽度和高度。
在开发网页中，SVG（Scalable Vector Graphics）广泛用于绘制可缩放的矢量图形。为了使 SVG 图形能够适应不同的屏幕尺寸和布局，我们需要能够根据百分比值设置 SVG 的宽度和高度。
阅读更多：CSS 教程
使用 CSS width 和 height 属性
我们可以使用 CSS 中的 width 和 height 属性来设置 SVG 的宽度和高度。当给这两个属性设置百分比值时，SVG 的尺寸会相对于其包含元素的尺寸进行调整。
以下是一个示例，展示了如何使用CSS百分比值设置SVG的宽度和高度：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 50%;
height: 500px;
}
svg {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>
</body>
</html>
在上面的示例中，我们创建了一个包含 SVG 的容器 div，并为其设置了宽度为 50% 和固定高度为 500px。然后，我们在 SVG 元素上设置宽度和高度为百分比值 100%，这样 SVG 将会填满整个容器。
使用 CSS max-width 和 max-height 属性
除了直接使用 width 和 height 属性来设置 SVG 的尺寸，我们还可以使用 max-width 和 max-height 属性来限制 SVG 的最大尺寸，同时使其能够根据容器进行缩放。
以下是一个示例，展示了如何使用 CSS 百分比值和 max-width 属性来设置 SVG 的宽度和高度：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 50%;
height: 500px;
}
svg {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>
</body>
</html>
在上面的示例中，我们创建了一个包含 SVG 的容器 div，并为其设置了宽度为 50% 和固定高度为 500px。然后，我们在 SVG 元素上设置了 max-width 和 max-height 属性为百分比值 100%，这样 SVG 将会根据其原始比例进行缩放，但不会超过容器的尺寸限制。
使用 CSS 和填充比例（Padding Ratio）
在某些情况下，我们可能需要将一个 SVG 元素作为背景图像，并根据其包含元素的宽度来调整其高度。这种情况下，我们可以使用 CSS 中的填充比例（Padding Ratio）来设置 SVG 的宽高比。
以下是一个示例，展示了如何使用填充比例来设置 SVG 的宽度和高度：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 500px;
padding-top: 50%;
}
svg {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>
</body>
</html>
在上面的示例中，我们创建了一个包含 SVG 的容器 div，并为其设置了固定宽度为 500px 和填充比例为 50%。然后，我们在 SVG 元素上设置了宽度为 100% 和高度为 auto，这样 SVG 将会根据容器的宽度来缩放，并保持与容器的宽高比一致。
总结
通过使用 CSS 中的百分比值来设置 SVG 的宽度和高度，我们能够使 SVG 图形能够根据不同的屏幕尺寸和布局进行自适应。我们可以使用 width 和 height 属性直接设置 SVG 的尺寸，或者使用 max-width 和 max-height 属性来限制 SVG 的最大尺寸。此外，我们还可以使用填充比例来根据容器的宽度调整 SVG 的高度。通过灵活运用这些方法，我们可以为网页中的 SVG 图形提供更好的可扩展性和适应性。