# 1. 视口

视口是指文档打算使用的画布区域。在 svg 元素上使用 widthheight 属性确定视口的大小,属性值可以仅仅是为数字也可以为带单位的数字(单位可以为emexpxptpccmmmin)也可以为百分比。

# 2. 默认用户坐标

SVG 阅读器会设置一个坐标系统,即原点 (0,0) 位于视口的左上角,x 向右递增,y 向下递增。这个坐标系统是一个纯粹的几何系统,点没有大小,网格线被认为是无限细。

SVG 中指定单位并不会影响其他元素中给定单位的坐标,也就是说 SVG 文档中各个元素的单位可以不统一。

# 3. 指定用户坐标

摒弃阅读器设置的默认用户坐标,可以自己为视口设置一个用户坐标。通过在 svg 元素上设置 viewBox 属性。

viewBox 属性由 4 个数值组成,分别代表要叠加在视口上的最小 x、最小 y,宽度、高度。

既然可以对 svg 自定义用户坐标,那么肯定要解决 svg 视口长宽比例和 viewBox 定义的长宽比例不同的问题以及如何对齐问题。这个时候就需要 preserveAspectRatio 属性了。

如果 viewBox 的长宽比例与视口的长宽比例不同,那么 svg 可以有以下三种选择:

  • 按较小的尺寸等比例缩放图形,使图形完全填充视口

  • 按较大的尺寸等比例缩放图形,病裁减掉超出视口的部分

  • 拉伸和压缩绘图以使其恰好填充视口

preserveAspectRatio 属性允许指定被缩放的图形相对视口的对齐方式,格式为 preserveAspectRatio = "alignment[meet|slice]"

默认值为 "xMidYMid meet"

alignment指定轴和位置,xy 方向都有 min, mid, max 三种方式,分别表示 xy 方向的对齐方式,对齐方式由 xy 组合指定,共 9 中方式,也就是 alignment 共有如下 9 个取值:

y\x xMin xMid xMax
yMin xMinYMin xMidYMin xMaxYMin
yMid xMinYMid xMidYMid xMaxYMid
yMax xMinYMax xMidYMax xMaxYMax

meet 说明符在图形超出视口时候会对图形适当缩小调整适配可用的空间

slice 说明符直接裁剪超出视口的部分

除了上述操作之外,还可以指定 preserveAspectRatio="none",用于在 viewBox 和视口宽高比不同时缩放图像,此时图像不会被等比例缩放,会被拉伸、挤压、变形。

# 4. 嵌套坐标系统

可以将另一个 svg 元素插入到文档中来建立一个新的视口和坐标系统,也就是说 svg 中可以嵌套另一个 svg,每个 svg 都有自己独立的视口和坐标系统。

最后更新: 2021/7/5 下午5:48:01