SVG 基本知识:SVG 放大缩小之 viewbox 初探 (1)
发布在SVG开发与应用2016年10月12日view:683svg
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

最近做了一个关于SVG的应用的技术分享网站svgtrick.com,会同步一些文章到这里来,更多的可以去网站看看。

接触过SVG都知道,SVG有自己的一套坐标视窗系统,理解它对于在SVG的使用,特别是要对SVG进行放大缩小,viewbox是必须要了解的一个知识点,而viewbox则是SVG中一个相对复杂的概念,打算分两篇来聊聊它,这篇文章就来聊聊SVG中的viewbox的一个基本知识和基本的应用。

viewport

首先来了解下SVG中的viewport这个概念,简单来说viewbox就是值指SVG图片本身可视区域的大小,除了SVG本身,其它一些元素也有可视区域的限制,比如symbol、*image*、pattern等。

在SVG中viewport主要是通过width和*height*属性来定义的。比如,我们定义一个width=”600”和*height=”600”*就表示我们定义了一个600X600的可视区域,这与html和css中还有一点不同,SVG本身定义这些属性并没有单位,不过基本上都是以像素px为单位的。

viewbox

viewbox确实是SVG中比较难懂抽象的一个属性,第一次接触它确实不知道它干嘛用的,就算理解了在使用中,有可能还是不知道如何去设置它。

viewbox简单的理解就是用来定义SVG的可视范围,那跟上面提到的viewbox有什么关系呢?这样来说吧,当没有设置viewbox的时候,viewbox就是整个viewport的大小,而当我们设定了viewbox,等于就是告诉SVG,我指定的这个区域是我要显示的,SVG就会把这个区域放大到viewport的大小,比如电视机,电视机就是那么大(viewport),而电视机里的画面,可以特写也可以全景,这就是viewbox。

preserveAspectRatio

preserveAspectRatio和viewbox是一个绝配的搭档,特别是当viewbox的值和viewport的值(也就是宽和高)不一样的时候,preserveAspectRatio属性就直接决定浏览器怎么来显示图片。

preserveAspectRatio这个属性有几个参数,要特别注意下,具体可以去这个地址详细了解下 文档地址

下面我们来通过几个实例来了解下viewbox的实际应用。

实例

首先来看看viewbox的值和viewport的值一样的表现,代码如下所示:

<div class="contain-demo">
  <svg width="115" height="190" viewBox="0 0 115 190">
    <desc>Green pear to show effects of matching viewport and viewBox.</desc>
    <g>
      <path fill="#BBC42A" d="M4.976,126.451c-0.571,1.76-1.067,3.551-1.475,5.377c-6.62,29.681,7.465,54.363,43.244,56.718 c56.994,3.751,77.653-25.65,60.462-67.25C90.017,79.697,82.063,89.688,80.366,57.764c-0.764-14.367-11.098-27.167-26.203-24.576
      c-17.378,2.982-19.794,19.916-22.192,34.44C28.36,89.508,11.623,105.957,4.976,126.451z"/>
      <path fill="none" stroke="#59351C" stroke-width="7" stroke-linecap="round" d="M56.427,40.406
     c0,0-7.375-15.376,8.06-35.837"/>
      <path fill="#7AA20D" stroke="#7AA20D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="
     M54.247,35.412c0.787-3.843,3.55-7.335,8.368-9.848c10.053-5.244,18.075-4.042,28.061,0.2c0.004,0.002,12.83,5.449,20.517-4.672
      c-4.778,6.291-9.415,12.478-14.878,18.237c-8.878,9.359-25.348,22.181-37.176,9.661C55.019,44.629,53.349,39.793,54.247,35.412z"/>
    </g>
  </svg>
</div>

从上面代码可以看出我们把viewbox的值设置和viewport的宽和高一样,运行结果如下图所示:

demo地址

减小viewbox

如果我们把viewbox的值各减少50px,我们就定义了SVG要显示的区域,结果就是SVG会把整个图像的左部区域拉大填满整个画布显示,如下图所示:

详细代码可以去这里查看。

增加viewport

上面由于我们减少了viewbox,由于SVG的可视区域也就是viewport不足以容纳显示整个内容,所以才会出现上图所示的只显示了图片的部分内容。

下面我们把SVG的可视区域也就是viewport的宽高各增加200px,viewbox保持115和190不变,则SVG内容会直接铺满整个可视区域,如下图所示:

demo地址

这一篇先了解了viewbox的一些基本知识以及应用,下一篇再来深入了解下它的其它一些参数以及应用。

参考文章:A Look At SVG viewBox and viewport,文章的实例都来自这篇文章。

评论
发表评论
暂无评论
WRITTEN BY
聆木听风
前端攻城师~~~!
TA的新浪微博
PUBLISHED IN
SVG开发与应用

专注于分享 svg 使用经验、技巧、以及教程的网站。

当然,这里不止于SVG,对于SVG动效设计的最佳搭档的GreenSock、Snapsvg、Mojs等动效js也会进行涉猎。

投资在学习上的时间总有一天会回赠给你自己 !

我的收藏