SVG描边动画

See the Pen jxPVEj by NINE (@sollrei) on CodePen.

图标是在阿里的iconfont里面随便翻的,下载的svg格式,描边动画需要有stroke

SVG的stroke属性

stroke 颜色

stroke-width 宽度

stroke-linecap 端点的表现

stroke-dasharray 虚线

描边......

React Native SVG描边动画

stroke属性

stroke 定义描边颜色

stroke="#0078ff"

strokeWidth 定义描边的宽度

strokeWidth="3"

创建虚线时候用到的属性:

strokeDasharray 创建虚线

// 假设一个‘空格’5像素,一个‘_’5像素

strokeDasharray="5"

// 看到的是 _ _ _ _ 即5像素......

SVG

SVG

SVG(Scalable Vector Graphics)是一种矢量图格式

SVG可以用Illustrator生成

+ 文件体积小

+ 有矢量图的特征,放大缩小而不失真【视网膜屏显示效果好】

SVG样式

fill => background-color/color

fill-opacity (0-1)

opacity

stroke => borde......