极客笔记CSS 对 SVG 使用 height: auto 不起作用
在本文中，我们将介绍为什么在 SVG 中使用 CSS 的 height: auto 属性无法起作用，并提供解决方法。
阅读更多：CSS 教程
背景
SVG（可缩放矢量图形）是一种基于 XML 的图像格式，它可以被缩放而不会损失图像质量。在 SVG 中，我们可以使用 CSS 来控制其样式，包括宽度和高度。然而，很多开发者发现，在 SVG 元素中使用 height: auto 属性无法按预期地自动调整高度。
问题解析
SVG 在定义元素尺寸时与其他图像格式有所不同。SVG 图像拥有固定的视口（viewport）大小，决定了图像的坐标空间。当我们使用 height: auto 属性时，浏览器无法确定图像视口的实际高度，因为它的高度是相对而不是绝对的。
举个例子，假设我们有一个 SVG 图像，它的视口宽度为 500px, 高度为 300px。然后，我们在 CSS 中将 height 属性设置为 auto。由于 SVG 对象的宽高比可以根据视口比例自动调整，但高度无法自动确定。这就是为什么 height: auto 不生效的原因。
解决方案
虽然 height: auto 在 SVG 中无法实现自动高度调整，但我们可以采取其他方法来解决这个问题。
使用 height: 100%
一种常见的解决方案是使用 height: 100% 属性，将 SVG 元素的高度设置为父元素的百分比。这样，SVG 元素将根据父元素的高度自动调整。
.parent {
height: 500px;
}
.svg-element {
height: 100%;
}
上述示例中，父元素的高度被设置为 500px，而 SVG 元素的高度被设置为 100%。这将导致 SVG 元素与父元素具有相同的高度，实现了自动调整的效果。
使用 JavaScript 动态调整高度
如果在不知道父元素高度的情况下，我们可以使用 JavaScript 来动态调整 SVG 元素的高度。
首先，我们需要获取父元素的高度，并将其赋值给 SVG 元素的 height 属性。
const parent = document.querySelector('.parent');
const svgElement = document.querySelector('.svg-element');
svgElement.style.height = `${parent.clientHeight}px`;
通过上述 JavaScript 代码，我们使用 clientHeight 属性获取父元素的实际高度，并将其值赋给 SVG 元素的高度。这将实现 SVG 元素的自适应高度。
总结
在 SVG 中使用 CSS 的 height: auto 属性无法起作用的原因是由于 SVG 的视口尺寸和对象自适应特性的限制。为了解决这个问题，我们可以使用 height: 100% 来将 SVG 元素的高度设置为父元素的百分比，或者使用 JavaScript 来动态调整 SVG 元素的高度。根据实际需求选择合适的方法来解决 SVG 元素的高度调整问题。