SVG图片之ViewBox

·  阅读 115

svg图片的width和height规定了图片的可视区域,下面的svg图片既是500px*300px大小

viewBox

viewBox顾名思意是“视区盒子”的意思,好比在说:“SVG啊,要不你就让我铺满你吧~”

更形象的解释就是:SVG就像是我们的显示器屏幕,viewBox就是截屏工具选中的那个框框,最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示!

<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>
复制代码

更直观的解释:

  1. 如果没有viewBox, 应该是长这样的:

大小只有整个SVG舞台的1/20.

viewBox="0,0,40,30"相当于在SVG上圈了下图左上角所示的一个框框:

然后把这个框框,连同框框里的小矩形一起放大到整个SVG大小(如下gif):

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改