ribbon image search rewind fast-forward speech-bubble pie-graph star

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 进行样式表现的。


你设置了多大的viewport你演技肯定看不到多的部分

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>  

未设置viewbox

<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="0 0 900 900"

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

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

可以查看 xooxstudio 的动图效果:

preserveAspectRatio

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

  • align

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

value details
xMin viewport 和 viewBox 水平靠左
xMid viewport 和 viewBox 水平居中
xMax viewport 和 viewBox 水平靠右
YMin viewport 和 viewBox 垂直靠上
YMid viewport 和 viewBox 垂直居中
YMax viewpor t和 viewBox 垂直靠下

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

xMaxYMax

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

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

设置为 meet

设置为slice

扩展阅读

You Can Speak "Hi" to Me in Those Ways