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职业地图》
领取专属 10元无门槛券
私享最新 技术干货