SVG之ViewBox

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

viewBox用来干嘛?

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

<circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>

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

<svg style="width:150px; height:300px">
    <circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>
</svg>

正常情况下面浏览器中显示是这个样子的
clipboard.png

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

<svg style="width:150px; height:300px" viewBox="0 0 400 400">
    <circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>
</svg>

摇身一变就成这样了
clipboard.png

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

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"
显示声明方式如下:

<svg style="width:150px; height:300px" viewBox="0 0 400 400" 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元素也会被等比拉伸,而不是维持原有比例。

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


前端学习笔记
记录一些自己学习前端技术时的知识点
1.8k 声望
120 粉丝
0 条评论
推荐阅读
shell脚本编程学习笔记-运算符
shell涉及数字计算的实际场景感觉相对较少,更多场景是关系运算。bash也不提供数字计算能力,需要通过expr实现。这里简单记录expr常用数字计算方式,其余篇幅详细记录关系运算。

梦梦她爹阅读 483

CSS & SVG 绘制写作网格线的3种方式
欢迎关注我的公众号:前端侦探最近有同事问我这样一个问题:需要绘制一个自适应文本的写作网格线,设计稿是这样的其实就是一行行虚线,要求如下虚线的纵向间隔要跟随行高自适应,确保文本在每一栏虚线上虚线后面...

XboxYan7阅读 1.4k

封面图
svg之viewBox
基本语法首先,我在大小为400 x 400的画布中绘制了一个200 x 200的矩形:可以发现,没有问题。现在,我把svg的宽和高改变后:可以看见,等比例变小了。简单的理解就是:viewBox规范了画布的大小,svg标签里面的内...

zxl200707013阅读 344

封面图
CSS、SVG、Canvas对特殊字体的绘制与导出
欢迎关注我的公众号:前端侦探最近在项目中需要对特殊字体进行绘制与导出,如下简单解释一下:所谓绘制,就是视觉上可以看到就行(预览状态),导出呢,就是将看到的转换成图片(或者Canvas),以便于后续处理。...

XboxYan3阅读 760

封面图
SVG 安全
一 目录不折腾的前端,和咸鱼有什么区别目录一 目录二 任务目标三 SVG 简要介绍四 SVG 漏洞认知&emsp;4.1 跨站脚本(XSS)&emsp;4.2 HTML 注入&emsp;4.3 XML 实体导致的 Billion Laughs 攻击&emsp;4.4 Dos(拒绝...

jsliang阅读 809

封面图
解决Draw.io生成svg矢量图导入Word后换行文本显示为省略号的问题
在使用draw.io画图时,为了最后写成的文档转换成pdf放大不失真,所有图片我都导出为svg。但是当将svg导入Word时,因为Word对svg图片格式支持并不完整,有些文本换行后在Word中只会显示换行前的文本,换行后的会显...

Levine阅读 438

vite3 + vue3如何封装健壮的【SVG插件】?
概念:SVG是一种基于XML的矢量图形格式,SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体,用于在Web和其他环境中显示各种图形;它允许我们编写可缩放的二维图形,并可通过CSS或JavaScript进行操作。它由万维网...

代码诗人_阅读 154

封面图
1.8k 声望
120 粉丝
宣传栏