SVG 中 viewport 与 viewbox 的区别

之前做 weex-svg 的时候，开发者第一次接触 SVG （手写那种，虽然很多情况都有设计师使用 AI 来完成这项工作，但还是不排除需要利用到 svg 的每个 元素）。

才开始，大家都会困惑于 viewBox 和 viewport这两个属性，大家可能也会看到 svg 代码中的千奇百怪。是的，自己也曾为此困惑，宝宝当时内心:

之前自己在做 SVG 学习笔记 的时候，也曾翻译过 Jakob Jenkov 的 关于 [viewport 与 viewbox] (http://tutorials.jenkov.com/svg/svg-viewport-view-box.html) 的区别。

翻译地址: http://events.jackpu.com/svg/#/prop-viewbox-and-viewport

今天再详细的说下这两者的属性。

viewport

viewport 也就是 可视区域 。它指定了 SVG 图像可见的范围，比如我们指定了一个 100px 的盒子，里面装下了一个500px 的圆，那么肯定你是看不全整个圆的。是不是大家也想到我们html5 中的 meta tag 中的 viewport 属性，它俩确实有些相像，我们都可以去设置他们区域的大小，比如 width 和 height。你也可以通过 css 的 class 来指定具体的高度。当然 css 中还有很多属性也是支持对 svg 进行样式表现的。

viewbox

viewbox 也就是 视盒 。它实际上可以看做是真正的一个坐标系，它定义了一个范围。是不是很惊喜？

实际我们再不设置 viwebox 的时候，viewbox 整个范围就是 viewport 的大小，如果指定了 viewbox 的话，则表示，我只需要表现这个区域的东西。

感谢 oxxostudio 提供的图片说明

viewbox 需要定义四个数据，也就是(x y width height)。前两个值定义盒子的左上角，后面两个单位定义盒子的右下角。一旦这个坐标系简历了，那么区域里面的所有元素的定位和形状则完全参照这个坐标系建立。

比如下面这个 svg 图形

<svg width="300" height="300">
	<line x1="20" y1="40" x2="280" y2="40" stroke="#000" stroke-width="2"  />
</svg>

<svg width="300" height="300" viewbox="0 0 900 900">
	<line x1="20" y1="40" x2="280" y2="40" stroke="#000" stroke-width="2"  />
</svg>

通过上图对比，可以发现使用 viewbox 整个图形相对原来的图形压缩了一些，这是因为整个坐标系由原来的 (300, 300) -> 变成了 (1000, 1000) 因此原来的长度在新的坐标系中变短了。

如果我们的图形超过了viewbox 的设置范围效果是怎样的呢？

可以查看 xooxstudio 的动图效果:

preserveAspectRatio

preserveAspectRatio, 表示长宽高比，它需要配合 viewbox 来使用 。因为一般情况下 viewbox 与 viewport 在长宽高的比例上是一致的，但是如果出现不一样的，这个时候我们需要通过 preserveAspectRatio 来设置 SVG 的图像显示方式。它有两个参数构成:

• align

align 由两对参数 构成，分别表示 viewbox 与 viewport 在水平和垂直方向上的对其方式

我们设置它的值应该是这样:

xMaxYMax

xMidYMid

• meet Or Slice
  这是第二个参数，表示填充规则。meet 则表示等比例缩放viewbox，直到宽或者高填满整个 viewport。而 slice 则表示等比例缩放，直到图形填满整个部分超过的部分会裁掉。

透过下面的PS 缩放操作可以了解两者的差别：

设置为 meet

设置为slice

扩展阅读

• SVG 研究之路 (23) - 理解 viewport 與 viewbox

• Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio

• SVG Viewport and View Box