一、入门
概念
Scalable Vector Graphics (SVG) 可扩展矢量绘图,是一种用来描述二维矢量图形的XML标记语言。
特性
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
SVG 的主要竞争者是 Flash。
与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。
基础形状
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
使用方式
将SVG文件作为图片,与普通图片使用方式一致;但不会加载自身引用, 如字体、图标等等外部资源。
将SVG作为应用程序,SVG文件也可以作为<object>
元素的data属性引入HTML中。但是,MIME type必须是image/svg+xml
。
混合文档, 直接跟HTML
标签混合写入, 会继承父文档的样式,默认以inline
方式显示。
使用总结
在我实际使用svg的过程中, 除了path
, 我觉得实现起来都不会太难。 path的可以用于十分复杂的场景,也十分灵活, 但学习曲线比较陡。接下来就一起看看path的一些实践例子。
二、实践
svg实现波浪、水泡效果
先上效果图
实现代码(Reactjs中)
1、波浪的实现
创建单个波浪的svg,wave.svg
(以下css的背景图引用) , 主要使用path
的C
指令绘制3次贝塞尔曲线, 其他指令可查阅svg教程。
1 |
|
创建4个div
1 | <div className="ocean"> |
编写样式
1 | .ocean { |
设定每个div
的位置和动画, 动画wave
表示波浪的作用位置,而且无限循环,动画swell
表示波浪的变换。就是如此简单!
2、水泡的实现
创建单个水泡(ES6)
1 | //单个水泡 |
创建svg
画布,大小8,使用<circle>
创建圆,半径是4。内联样式,规定布局位置是: absolute
, 具体坐标是随机生成的,再加入动画,无限循环。
创建多个水泡
1 | //生成指定个数的随机位置水泡 |
在Reactjs的渲染中调用
1 | {this.createRandomPops()} |
水泡的样式
1 | @keyframes popup { |
水泡只需要向上冒即可,开始从底部16%的位置, 终止位置大约在页面中间,无限循环。
svg实现渐变进度条
效果图
- 图中的进度条是由左右两个半圆组合而成。
代码实现(Reactjs)
绘制扇形
1 |
|
关键点:由于是动态的进度,x、y的值必须是动态计算,这里包含是数学知识是:在圆中根据角度计算坐标值。M
指令是移动光标到初始位置的坐标, A
指令是绘制一条曲线。
在React中定义svg
1 |
|
linearGradient
是表示创建渐变;
g
中的circle
表示进度条的底色和外部包裹圆环;当进度大于50%时才创建左半圆,边框的宽度都是40px;
colors是预定义的几种颜色,用于渐变 :const colors = {max: '#3cc8bc', middle: '#27aea3', mini: '#9eece7'}
;
百分比显示在圆环中间。
总结
本文通过两个简单例子展示svg的强大之处。总的来说,svg不难, 只是涉及的知识比较多, 多实践,就熟练了。