Skip to main content

基础概念

画布坐标​

svg的画布是一个无限大的画布，它的大小

image-20250310183419162

viewBox​

由于svg的画布是无限大的，而viewBox就是一个视口（蒙板层），告诉svg需要绘制画布的哪个位置

<svg width="300" height="200" 
    viewBox="0 0 100 100" 
    preserveAspectRatio="xMidYMid meet" // 对齐方式 缩放方式
    >
  <rect x="0" y="0" width="100" height="100" fill="red"/>
</svg>

1. 对齐方式（Align）​

定义 viewBox 在视窗中的对齐位置，格式为 x符Y符，例如 xMidYMid：

  • x 轴对齐符：xMin（左对齐）、xMid（居中）、xMax（右对齐）
  • y 轴对齐符：YMin（顶部对齐）、YMid（居中）、YMax（底部对齐）

2. 缩放模式（Meet/Slice）​

控制是否保持宽高比：

  • meet：保持比例，完整显示 viewBox（类似 CSS contain）
  • slice：保持比例，裁剪 viewBox 溢出部分（类似 CSS cover）
  • none：不保持比例，拉伸填满视窗

内部标签​

image-20250310202446416