SVG之ViewBox

最近开始看SVG Essentials。找不到中文版的,逼着自己看原版书,进度比较慢,不过边学技术边学英语还是挺有成就感的^_^。
目前看到Chapter 4,有必要先停下来整理下viewport这个知识点,个人感觉挺关键的。

viewBox用来干嘛?

比方说,我用svg画了个半径200px的圆


如果是在一个400*400的画布上,圆正好撑满整个画布,挺好的。
好了,然后我要把这个圆嵌入到自己的页面里的svg标签里去,页面的svg标签尺寸是由实际业务需要来定的,不一定正好是,可能大可能小,还可能不是正方形。


    

正常情况下面浏览器中显示是这个样子的
SVG之ViewBox_第1张图片

产品见了肯定不乐意啊,“我要整个圆啊,谁要这种残次品啊”。
咋整的,要么把这个圆的代码改了吧。
可如果不是简简单单一个圆呢,而是一大堆复杂代码,改个鬼啊。
呵呵~此刻,便是viewBox用武之地!


    

摇身一变就成这样了
SVG之ViewBox_第2张图片

圆变小了,展示全了,还垂直居中了。
一件一件事来,看看发生了什么。

viewBox的四个参数分别代表:最小X轴数值;最小y轴数值;宽度;高度。
前两个暂时用不到,个人理解除非要对内部svg做整体位移,否则一般都是0 0,暂时先不做解释,重点关注后两个参数。
想象一下viewBox是个400*400的正方形,但是单位不是px,也不是任何一个css单位,就当是一个假的单位吧。在viewBox放了一个圆,这个圆的半径是200,单位也不是px,而是变成了和viewBox的单位一模一样的那个假的单位。为啥说是假的呢?因为这个单位代表的长度是会变的,接着看。
svg有个特点,在默认情况下,会调整这个viewBox的大小,让这个viewBox正好能被放进svg里去。拿上面例子来说,viewBox是个正方形,而svg的宽度比高度小,所以就把viewBox的大小缩小到和svg宽度一样,就能正好将viewBox放进svg里来了。所以现在viewBox的实际大小是个150px*150px的正方形。
所以现在可以确定的是,viewBox的一个单位代表的长度 = 150px/400 = 0.375px。
而viewBox内部的所有数值*0.375px才是真正的长度。那个circle的圆心实际上是在坐标75px, 75px的位置上,半径为75px。

圆的具体大小大概就是这么回事。
再看svg那个默认调整viewBox大小是怎么回事儿。
隐藏属性preserveAspectRatio粉墨登场!

preserveAspectRatio又用来干嘛?

英文直译:维持外观比例。好像还挺语义化的一属性名。
对,这是个属性,它和viewBox的关系特别密切。即使不显示声明这个preserveAspectRatio属性,viewBox也是会有这个属性的默认设置的,即preserveAspectRatio="xMidYMid meet"
显示声明方式如下:

说说preserveAspectRatio的这个参数。

第一个参数有9个不同值可选

xMinYMin,
xMinYMid,
xMinYMax,
xMidYMin,
xMidYMid,
xMidYMax,
xMaxYMin,
xMaxYMid,
xMaxYMax

是不是特有规律啊?x和y表示对齐的轴线,min,mid,max表示对齐的方式。min是往坐标小的方向对齐;mid居中对齐;max是往坐标大的方向对齐(顺带一提svg的坐标0刻度在左上角)。

第二个参数有两个值可选:meet和slice
meet就是前面那种自动调整viewBox到可以在svg画布中完全展示。非常类似css里background-size:contain
而slice是自动调整viewBox到撑满整个svg画布。非常类似background-size:cover

再回看第二张图里那个垂直居中的圆,就能明白为什么会“圆变小了,展示全了,还垂直居中了”。

其实说是preserveAspectRatio的第一个参数有9种值,在确定svg画布宽大于高,或者高大于宽的情况下,可以缩减到就3种值,其他值都是重复的,但在不确定画布尺寸时,还是要明确需求选择合适的参数值。

preserveAspectRatio还有个单独使用的参数:"none"。
这种时候viewBox会被拉伸到和svg画布相同尺寸,而内部的所有svg元素也会被等比拉伸,而不是维持原有比例。

第一个知识点整理完毕,待续~ 必须啃完人生第一本原版技术书!!!

你可能感兴趣的