SVG的基础概念-视窗viewPort,viewBox,preserveAspectRatio的讲解
2017-03-15 01:31

SVG的基础概念

对于svg的一些概念网上遍地都是,但是呢,概念都是一些抽象的定义描述,比较晦涩难懂。对于概念,懂得不用看,不懂的看不了。

所以呢,说这些概念,最好是用形象的比喻,才能让不懂一看就明白,懂得看了也会加深理解。

先写一个div

<div class='cont'></div>
<style>
.cont{
    margin:20px;
    padding:20px;
    border:1px solid #ccc;
    width:300px;
    height:200px;
    text-align:center;
    overflow:hidden;
    background:#f1f1f1;
}
</style>


blob.png

这个div的宽300,高200,就是svg的viewPort视窗

相当于下面的代码

<svg width='300px' height='200px'>
</svg>

在div中添加一个1024*768的图片。

样式如下:

<div class="cont">
<img src="images/girl2.jpg" class="ii"/>
</div>
<style>
.cont{
    margin:20px;
    border:1px solid #ccc;
    width:300px;
    height:200px;
    text-align:center;
    overflow:hidden;
    background:#f1f1f1;
    overflow: hidden;
    white-space: nowrap;
}
.cont:after{
    content:"";
    display:inline-block;
    width:0;
    height:100%;
    vertical-align: middle;
}
.ii{
   max-width:100%;
    max-height: 100%;
    display:inline-block;
    vertical-align: middle;
}
</style>

这些个样式不用细解释了吧,就是让图片自适应div的最小边,另一边保持纵横比显示图片。div的样式是让图片上下左右居中。

效果如下:

svgXY2.png

同样它对应svg的viewBox

<svg width="300" height="200" viewBox="0 0 1024 768" class="svgcont">
<image height="768" xlink:href="images/girl2.jpg" width="1024" ></image>
</svg>
<style>
.svgcont{
    border:1px solid #ccc;
    background:#f1f1f1;
    margin:20px;
}
</style>

div和svg的对比效果如下:

blob.png

svg的效果和div实现的效果是一样一样的,所以svg的viewBox和viewPort的关系,就如果div中的img缩放适应div的大小一样。

viewBox进行缩放坐标系到viewPort的大小,宽高比不一样时,以缩放值最大的坐标边进行缩放,另一边保持viewBox的纵横比。

但是呢,viewBox的前两个数值就跟div有所不同了。viewBox="200 100 1024 768",表示的就是从图片的left:200,top:100 到1024宽,768高的位置裁剪一个矩形,然后再按照宽高比进行缩放。

我们单独用svg的viewPort的大小和viewBox宽高比一致,为1/4。

<svg width="256" height="192" viewBox="0 0 1024 768" class="svgcont">
    <image height="768" xlink:href="images/girl2.jpg" width="1024" ></image>
</svg>
<svg width="256" height="192" viewBox="200 100 1024 768" class="svgcont">
    <image height="768" xlink:href="images/girl2.jpg" width="1024" ></image>
</svg>
<svg width="256" height="192" viewBox="-200 -100 1024 768" class="svgcont">
    <image height="768" xlink:href="images/girl2.jpg" width="1024" ></image>
</svg>
<style>
.svgcont{
    border:1px solid #ccc;
    background:#f1f1f1;
    margin:20px;
}
</style>

效果如下:

blob.png

viewBox的前两个值的作用很明显,在svg的viewBox大小上裁剪svg图形,然后再缩放到viewPort中。这里说好理解也好理解,说不好理解也不好理解。

值得注意的是,viewBox的后两个值:1024,768是svg本身的宽,高,跟前两个值是多少没有关系。

也就是svg在放到视窗viewPort上之前,先裁剪svg图形本身,比方第二个图,viewBox="200 100 1024 768",从 200,100位置开始裁剪,那么去除了前面这一截图形,再1024长,768宽,就不够了,不够的地方就用空白显现了。所以图的右下角就是空白的了。

写了一个展示viewBox裁剪过程的动画效果,你可以点击查看:viewBox裁剪效果

svg的preserveAspectRatio

svg还有一个preserveAspectRatio的属性。通常用法有两个值,例如“preserveAspectRatio='xMidYMid meet'”,第一个值表示对齐方式,第二个值表示缩放方式。

第一个参数比较简单,可以按照background-position来理解

xMinYMin = background-position: 0% 0%。

xMinYMid = background-position:0% 50%。

xMinYMax = background-position:0% 100%.

其他的类似,x表示横向对齐方式,y表示纵向对齐方式,Min,Mid,Max 表示0%,50%,100%。

blob.png

说白了这个xMinYmid就相当于对齐方式,像上面这种效果,xMin是左对齐,xMid是居中对齐,xMax是右对齐。而上下是铺满的,YMin,YMid,YMax的效果是一样的。

blob.png

blob.png

第二个值,有两个可选值:meet ,slice。

这个也好理解,meet的效果就是保持svg的纵横比,并且按照viewport比较小的边缩放。slice也是保持纵横比,但是是按照viewport比较的边缩放,达到铺满视窗的效果。

preserveAspectRatio还有另外一个值,preserveAspectRatio='none',这个会扭曲svg的纵横比来铺满视窗。

总结

viewBox一般的用法也就是 viewBox='0 0 width height', 而preserveAsprectRatio='xMidYMid meet'是最常用的属性。而它也是svg渲染中默认的Ratio方式。所以呢,这些东西的概念虽然比较烦人,但如果不是特殊用途,一般用不到。理解这些概念固然重要,但是不理解也不影响我们对SVG的使用。要想用好SVG,理解SVG的坐标系以及SVG的坐标系的转换transform却是很重要。后面的文章,我将介绍SVG的坐标系,以及坐标系的transfrom转换。尽量采用更易理解的方式让大家更好更快的明白SVG坐标系的特点。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(3684)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1