SVG viewBox 与响应式缩放

SVG 的宽度和高度设置 DOM 中的渲染尺寸。viewBox 属性定义内部坐标空间。二者彼此独立：viewBox 为 "0 0 100 100"，宽度为 "200"、高度为 "200" 时，坐标空间会放大 2 倍。

viewBox="min-x min-y width height"。最常见的写法是：viewBox="0 0 100 100"，它定义了一个从原点开始的 100x100 坐标空间。SVG 中的坐标值都指向这个空间，而不是像素。

要实现响应式 SVG，请省略宽度和高度属性（或将其设置为 100%），让 viewBox 定义比例。添加 CSS：svg { width: 100%; height: auto; }。SVG 会在保持宽高比的同时缩放，以适应其容器。

preserveAspectRatio 控制宽高比不同时 viewBox 如何适配 SVG 视口。可选值包括："xMidYMid meet"（默认值——两侧留白）、"xMidYMid slice"（裁剪内容以填满区域）和 "none"（拉伸以适应区域，不保持宽高比）。

更改 viewBox 的起始横纵坐标，可以平移 SVG 坐标空间中可见的部分。viewBox="50 50 100 100" 显示从 (50,50) 到 (150,150) 的区域。通过使用 JavaScript 更新 viewBox 值，可以实现交互式平移。

缩小 viewBox 的尺寸可以放大显示：viewBox="25 25 50 50" 会显示一个更小的区域，并将其放大以填满 SVG 元素。增大尺寸则会缩小显示。在滚轮事件中更新 viewBox，即可实现交互式缩放，而无需缩放 SVG 元素本身。

将 SVG 放在图像标签中：可以通过 object-fit 响应式缩放，但无法使用 CSS 设置样式或通过脚本控制。内联 SVG：可以完全使用 CSS 和 JavaScript，但会增加 HTML 的大小。请根据是否需要交互来选择。

图标 SVG 使用固定的 viewBox（例如 "0 0 24 24"），不设置宽度和高度，让 CSS 控制其尺寸：.icon { width: 1.5rem; height: 1.5rem; }。viewBox 可确保图标在任意尺寸下都能正确缩放，同时保持清晰的矢量渲染效果。

在隐藏的 SVG 中使用 <symbol viewBox="0 0 24 24"> 元素定义图标。使用 <use href="#icon-name"> 引用它们。每个引用元素都可以拥有自己的宽度、高度、填充和颜色，从而用一个精灵文件包含所有图标。

SVG 中的 fill="currentColor" 会从元素自身或其父元素继承 CSS 的 color 属性。在 SVG 或父元素上设置 color: red 后，图标会自动填充为红色。这样，单色图标无需专门的 SVG 样式，就能跟随文本颜色变化。

如果 SVG 内容被裁剪，或位置与预期不符，请记录或检查 viewBox 的值。一个常见错误是：将 viewBox 设置为源图形的像素尺寸，却没有根据渲染尺寸进行调整，从而导致缩放问题。请确认 viewBox 与 SVG 图形内容的实际边界相匹配。

如何让 SVG 响应式缩放，以适应任意容器宽度？

SVG 的 viewBox 定义了独立于渲染像素尺寸的内部坐标空间，因此可以实现响应式缩放。将宽度设置为 100%、高度设置为 auto，并配合 viewBox，SVG 就能适应任意容器。符号与引用精灵图模式、使用 currentColor 实现主题化，以及 preserveAspectRatio 共同构成了一套灵活且支持主题定制的 SVG 使用方案。