svg
SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。本质上是文本文件,体积较小,且不管放大多少倍都不会失真。
特性
SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作。
语法
SVG 代码都放在顶层标签 <svg>之中。
// 实例1
<svg width="100%" height="100%">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
复制代码
当然svg有很多基础知识,你可以点击这里进行学习查看。 我们今天会用到的是defs和circle标签
来看下这两个标签的基本使用。
就看实例1会创建一个圆 cx
cy
定义了圆心的位置,不填默认为(0,0),r定义了圆的半径。
这里我们可以通过给svg添加类名,来改变圆的样式,当然做出一个圆环的效果我们还需要多几个属性。stroke
,stroke-dasharray
,stroke-dashoffset
,fill
,stroke-width
属性。
stroke
属性
: 定义了给定图形元素的外轮廓的颜色。它的默认值是none。
stroke-width
属性
: 指定了当前对象的轮廓的宽度。它的默认值是1
- stroke-dasharray
属性
: 就是虚线的长度要默认为none,该值由两个值合写,使用英文逗号(,)分隔,第一个值是画出的每段实线线段的长度,第二个值是各段之间空隙的长度
。如果无分隔,则说明两个值都是一样大小的。
stroke-dashoffset
属性
: 表示虚线的起始偏移loading圆环效果的重点
之后会实例演示
- fill
属性
: 图形元素的填充色,实现圆环效果时候需要设置为none
实例
介绍了上面的属性后我们来看看他们能实现怎么样的效果,首先来看怎么做成一个圆环的效果
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="40" fill=none stroke=red stroke-dasharray="10" stroke-width=5 />
</svg>
复制代码
我们已经做出一个圆环了,并且知道了基本的使用方法,接下来我们只需要搞清楚
stroke-dashoffset
属性就可以完成圆环的过渡效果了。那就来了解下
stroke-dashoffset
属性。
看了 张鑫旭大佬的文章简单明了的案例解释的非常好。我也借用案例来说明
stroke-dasharray和stroke-dashoffset
的关系。
stroke-dasharray接收两个参数用,隔开一个表示长度(dash),一个表示间距(gap)如: '10,5' 多个值: '10,5 20,10'每两个为一组中间用空格隔开,设置了stroke-dasharray直线不仅样式变成虚线,根据设定好的虚线长度和间距不断循环下去
我们可以通过动态改变dash和gap来更加直观的了解stroke-dasharray
属性
在了解了
stroke-dasharray
属性的机制最后登场的就是主角就是
stroke-dashoffset
通过动态改变它的值可以实现很多动画效果。
stroke-dashoffset属性指定了dash到路径开始的距离 但是这里需要注意的是stroke-dashoffset偏移距离是相对于stroke-dasharray中
dash+gap
的距离,因为直线的长度相当于dash+gap无限循环下去,可以将直线距离想象成截取了200px的长度,如果增加stroke-dashoffset的大小,相当于将直线向左移动。
如果将上图中的虚线长度和间隔都设置为200的时候
将stroke-dashoffset设置为200时,相当于将直线左移200这样可视区域中就没有展示出线条长度。当我们动态减小stroke-dashoffset的值到0,就会有一条直线出现。
针对上面的理论我们进行实践一波,
在未设置stroke-dashoffset 直线会全部显示在可视区域中,当stroke-dashoffset改为200以后相当于全部移动到左边,通过动态减少值到0直线也会动态生成出来。
动态圆环loading
有了直线案例的实践,我们知道了其实我们看到的可视区域直线就是stroke-dasharray属性中dash
,而通过gap
来设置间距,然后通过stroke-dashoffset来调整控制显示虚线(dash)和间距(gap)的距离。一般采用的是,将dash和gap还有stroke-dashoffset的值设置成相同,然后通过动态减小stroke-dashoffset将dash部分挪到可视区域实现动画效果。 有了理论知识,接下来我们来实践下圆的loading。
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
height="400">
<defs>
<linearGradient x1="20%"
y1="50%"
x2="10%"
y2="100%"
id="gradient1">
<stop offset="0%"
stop-color="rgba(255,0,255,.3)"></stop>
<stop offset="100%"
stop-color="rgba(0,255,255,.76)"></stop>
</linearGradient>
</defs>
<circle ref="myCircle"
class="circle"
cx="144"
cy="126"
r="120.5"
stroke="url('#gradient1')"
stroke-width="10"
fill=none></circle>
</svg>
复制代码
圆环的效果已经出来了,但是起始的方向好像不太对劲,使用transform中的旋转属性。
<circle ref="myCircle"
class="circle"
cx="144"
cy="126"
r="120.5"
stroke="url('#gradient1')"
stroke-width="10"
fill=none
transform="matrix(0,-1,1,0,0,270)"></circle>
复制代码
transform: matrix(s, a, a, s, d, d)s 代表缩放第一个 s 代表 X 轴第二个代表 Y 轴,a 代表倾斜第一个 a 代表 Y 轴倾斜第二个 a 代码 X 轴,0 代表偏移量第一个代表 X 轴第二个代表 Y 轴,d代表是xy周的偏移量
当然你可以直接写一个`rotate(-90)`来改变方向,记得设置transform-origin
经过css矩阵调整以后loading圆环完成啦!
结语
介绍了svg的基本使用,重点介绍了stroke-dasharray属性和stroke-dashoffset属性的原理。实现一个loading也很好上手,赶快来做一个自己的圆环吧。下一篇将分享小米手环柱状图滑动的动画实现
。