响应式 SVG

学习如何创建自适应不同尺寸和比例的 SVG 图形。

📐 viewBox 基础

拖动右下角调整容器大小，观察 SVG 如何自适应

              <!-- viewBox="min-x min-y width height" --> <svg viewBox="0 0 200 200"> <!--
                内容会自动缩放以适应容器 --> </svg>
            

🎯 preserveAspectRatio

控制 SVG 在容器中的对齐和缩放方式

xMinYMin meet

xMidYMid meet

xMaxYMax meet

none (拉伸)

              <!-- 对齐方式: xMin/xMid/xMax + YMin/YMid/YMax --> <!-- 缩放方式: meet(完整显示) / slice(裁剪)
                / none(拉伸) --> <svg preserveAspectRatio="xMidYMid meet">...</svg>
            

🎮 交互式 preserveAspectRatio 编辑器

X 对齐:

Y 对齐:

缩放方式:

preserveAspectRatio="xMidYMid meet"

📱 响应式图标示例

使用 viewBox 创建可缩放的图标

              <!-- 相同的 viewBox，不同的尺寸 --> <svg viewBox="0 0 24 24" width="24"
                height="24">...</svg> <svg viewBox="0 0 24 24" width="48" height="48">...</svg>
                <svg viewBox="0 0 24 24" width="72" height="72">...</svg>
            

🌊 流式布局 SVG

使用百分比宽度实现流式布局

              <svg viewBox="0 0 800 200" style="width: 100%; height: auto;"> <!-- 内容会随容器宽度自动缩放
                --> </svg>
            

💡 关键知识点

viewBox: 定义 SVG 的坐标系统，格式为 "min-x min-y width height"
preserveAspectRatio: 控制 SVG 如何适应容器
meet: 保持宽高比，完整显示内容（类似 contain）
slice: 保持宽高比，填充容器并裁剪（类似 cover）
none: 不保持宽高比，拉伸填充容器
对齐方式: xMin/xMid/xMax 控制水平对齐，YMin/YMid/YMax 控制垂直对齐
响应式技巧: 使用 width: 100% 和 height: auto 实现流式布局
图标设计: 使用固定的 viewBox（如 24x24）便于缩放