SVG 缩放属性

SVG（Scalable Vector Graphics）是一种基于可伸缩矢量图形的图像格式，与像素图形不同，它可以在任意分辨率下按比例缩放，而不失去清晰度和质量。

在 SVG 中，嵌入了大量的缩放控制属性，可以让我们根据需要快速简单地控制图形的缩放效果。下面将介绍一些常用的 SVG 缩放属性。

viewBox 属性

viewBox 属性用于定义 SVG 中是否可视区域。语法如下：

<svg viewBox="xmin ymin width height">
  <!-- SVG 内容 -->
</svg>

其中，xmin ymin 是 SVG 中的左上角点坐标，width 和 height 是 SVG 的宽度和高度。这里的 viewBox 可以理解为一个矩形参考框，它可以对 SVG 图像进行缩放和平移，以适应不同的显示设备和窗口大小。

preserveAspectRatio 属性

preserveAspectRatio 属性用于定义 SVG 图像在物理空间中的拉伸和缩放方式，语法如下：

<svg preserveAspectRatio="X Y meet-or-slice">
  <!-- SVG 内容 -->
</svg>

其中，X 表示横向拉伸方式，有以下取值：

• none：不进行横向拉伸
• xMinYMin：xiang='ymin ' 取到的位置是当前viewBox的水平左边框 yMin取到的是当前viewBox的竖直上边框。从视口的上方或左方开始扩展SVG。
• xMidYMin：水平居中。从视口中心向上、向左扩展SVG。
• xMaxYMin：xiang='ymax' 取到的位置是当前viewBox的水平左边框 yMin取到的是当前viewBox的竖直上边框。从视口的上方或右方开始扩展SVG。

Y 表示纵向拉伸方式，有以下取值：

• none：不进行纵向拉伸
• xMinYMin：从视口的上方或左方开始扩展SVG。
• xMidYMin：竖直居中。从视口中心向上、向左扩展SVG。
• xMaxYMin：从视口的上方或右方开始扩展SVG。

meet-or-slice 表示拉伸方式，有以下取值：

• meet（默认值）：在最小比例下尽可能多地包含整个视口
• slice：按比例裁剪SVG以填充视口

width 和 height 属性

width 和 height 属性用于设置 SVG 图像的宽度和高度，在浏览器中显示大小将等于其指定的宽度和高度。语法如下：

<svg width="value" height="value">
  <!-- SVG 内容 -->
</svg>

其中，value 表示长度单位的值。这里有一些常用的长度单位：

• px：像素
• pt：磅（1/72英寸）
• em：相对于当前字体大小的倍数
• ex：相对于“x”字母高度大小的倍数
• %：相对于父容器宽度或高度的百分比

transform 属性

transform 属性用于对 SVG 图像进行变换，包括平移、旋转、缩放等。语法如下：

<svg transform="...">
  <!-- SVG 内容 -->
</svg>

其中，... 表示变换操作，它可以包括多个变换函数和参数，常用的变换函数有以下几种：

• translate(dx, dy)：将图形向右平移 dx，向下平移 dy
• rotate(angle)：将图形顺时针旋转 angle 度
• scale(sx, sy)：将图形在 x 轴和 y 轴上放大 sx 和 sy 倍
• skewX(angle)：将图形在 x 轴上选择 angle 度
• skewY(angle)：将图形在 y 轴上选择 angle 度

小结

以上介绍了常用的 SVG 缩放属性，包括 viewBox、preserveAspectRatio、width 和 height、transform。这些属性可以通过简洁、灵活的方式控制 SVG 图像的外观和行为。