CSS基础（九）-viewBox（svg

SVG的知识体系比 Canvas大很多，今天介绍一些基础概念

基本要素：

HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。一个简单的SVG文档由根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。

从这些开始，SVG可以成为任何复杂的组合图形。SVG支持渐变、旋转、滤镜效果、JavaScript接口等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。

如果你对xml不了解，以下两点要记住：

SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和html不同）

SVG里的属性值必须用引号引起来，就算是数值也必须这样做。

各自特点：

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

两者区别：

SVG

不依赖分辨率（图像在缩放时其图形质量不会有所损失）

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

不适合游戏应用

Canvas

依赖分辨率（图像在缩放时其图形质量会有所损失）

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

坐标定位：

和canvas差不多，都是使用倒坐标轴，即以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。在HTML文档中，元素都是用这种方式定位的。

viewport，viewbox登场

Viewport可以理解为svg的大小，类似于画布。此SVG的长宽各是200个单位。这里可以用css规定的单位如：px, em, %等。

官方定义：The value of the viewBox attributeis a list of four numbers min-x, min-y, width and height, separated by whitespace and/or a comma, which specify a rectanglein user space which is mapped to the bounds of the viewport established for theassociated element. (https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox)这句话简单理解就是：指定了一个矩形用来当作viewport和内部图形的一个映射。哇哦～这个很复杂的概念原来就和比例尺的概念一样。那么我们来看栗子～

此句代码表示，svg的宽高分别为400px和300px，为了看图方便我们加了一个红色边框。rect是svg内置的图形标签，意思是矩形的左上角（起始点）位于坐标（0，0），宽20单位（注意不是像素），高15单位（注意不是像素），填充骚紫色。如图：

那viewbox是怎么起到类似比例尺的作用呢？想象一下一个宽高比为40:30（4:3）的盒子，填充在宽高为400px，300px的viewport里，这样的话比例单位就是1:10px。那么rect中宽是20个单位，就是20 * 10px = 200px，高是15个单位，就是15 *10px = 150px。rect的宽高就是200px和100px! Yeap 这就是viewbox！

viewbox有几个特点：

1.总能以合适的比例放入viewport。不用担心viewbox太大或者太小；

2.viewbox总有一个边与viewport重合，就用这个重合的边计算比例单位。

3.受到preserveAspectRatio属性影响表示是否强制进行统一缩放，这个属性影响了我们用viewbox去计算比例单位的状况。

preserveAspectRatio2个默认值如下：

xMidYMid(默认值) -强制统一缩放。

将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。

将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。

meet(默认值) - 图形将缩放到:

宽高比将会被保留

整个SVG的viewbox在视图范围内是可见的

尽可能的放大SVG的viewbox，同时仍然满足其他的条件。

（preserveAspectRatio详细解释：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio）

感兴趣的同学可以去看下此属性的其他值。

欢迎补充和指正，感谢关注《IT职业地图》