SVG 视口和用户空间

前端教程SVG

本节我们讲解 SVG 视口和用户空间的概念。

什么是 SVG 视口和用户空间？

上图中：

• 整个淡黄色的区域是假想的无限大的 SVG 画布，SVG 可以在任意地方绘制任意图形，我们称之为用户空间；
• 然而当 SVG 嵌入到 HTML 中的某个区域时（上图中的蓝色区域），这个区域就是 SVG 视口，如果 overflow=hidden(默认)，那么超过此视口的图形都会被裁剪;
• SVG 视口的大小由 width 和 height 决定（跟其他 HTML 元素一样）；
• SVG 内部的用户空间使用自己的坐标系统和长度单位，通过 viewBox 来控制把用户空间的哪块区域映射到视口上。

WARNING

SVG 视口和浏览器视口是不一样的。

视口示例：

新窗口打开

上面的图片大小为 400×250

• 当视口为 400×300 时，图片可以全部显示
• 当视口为 200×200 时，图片被裁剪

viewBox 映射

在上面的视口示例中，当视口为 200×200 时，图片显示不全，此时我们可以通过修改 viewBox，来让图片完全显示出来。

viewBox语法：

<svg ... viewBox="minX minY boxWidth boxHeight" >...</svg>

• minX minY：用户空间坐标原点的偏移量
• boxWidth boxHeight：被映射区域的宽和高

TIP

viewBox 如果省略，则默认为 0 0 svg.width svg.height

viewBox示例：

新窗口打开

• 图片尺寸为 400×250，viewBox="0 0 500 250"，viewBox 尺寸大于图片的，所以图片全部显示出来了；
• 然后把 viewBox 映射到 200×200 的视口中，此时图片在 HTML 中实际显示的尺寸是 160×100。

用户空间偏移示例：

新窗口打开

• 修改 viewBox.minX viewBox.minY 的数值，可以在视口内移动 SVG。

缩放宽高比（preserveAspectRatio）

当视口和 viewBox 的宽高比不一样时，可以通过 preserveAspectRatio 来控制缩放和居中。

TIP

关于 preserveAspectRatio 取值说明，请参考MDN-preserveAspectRatio。

preserveAspectRatio 示例：

新窗口打开

• 蓝色区域为整个视口，视口大小固定为 400×250
• 红色区域为 SVG viewBox 映射区域
• 请选择不同的 viewBox 和不同的 preserveAspectRatio 来观察缩放情况

视口尺寸单位

前面的例子中，我们都是使用默认的 px 作为尺寸单位，例如 width="200" height="100" 定义的视口为 200像素×200像素。像素并不能表达实际的长度，200像素×200像素 在不同屏幕中实际长度也会不一样。如果要在不同屏幕都绘制相同实际长度的图形，我们需要使用实际长度单位：

• cm：厘米(Centimeters)
• mm：毫米(Millimeters)
• in：英寸(Inches)

视口实际尺寸单位示例：

新窗口打开

• width="6cm" height="4cm"：定义了 6厘米×4厘米 的视口
• viewBox="0 0 6 4"：把视口映射到了 6用户单位×4用户单位 的用户空间，这里每个用户单位正好是 1cm
• 红色的矩形：3厘米×1厘米
• 蓝色的圆形：圆心在 (3,2)，半径为 1厘米

嵌套坐标

<svg> 元素可以嵌套 <svg> 元素。

嵌套坐标示例：

新窗口打开

• svg.x="3" svg.y="2"：嵌套的 <svg> 的左上角用户坐标是 (3,2)，转换为视口就是 (3cm,2cm)
• svg.width="2" svg.height="1"：嵌套的 <svg> 宽度为 2用户单位即 2cm，高度为 1用户单位即 1cm
• svg.viewBox="0 0 2 1"：定义了 2×1 的用户空间，转为视口就是 2厘米×1厘米
• 嵌套的 <svg> 中有一个 200厘米×200厘米 的矩形，虽然大小远超过嵌套的 <svg>，但是由于嵌套的 <svg> 设置了 viewBox，所以多余的区域被裁剪了

小结

本节讲解了 SVG 在 HTML 网页里的占据空间（viewpoint 视口），以及内部坐标（用户空间），下节我们讲解特殊的元素 <view>。