SVG路径描边动画效果的实现

最新推荐文章于 2024-05-18 23:00:17 发布

甩头淡忘烦恼

最新推荐文章于 2024-05-18 23:00:17 发布

阅读量1.9k

点赞数 1

文章标签：动画 svg

本文链接：https://blog.csdn.net/qq_36571602/article/details/77914911

版权

理解SVG坐标系和变换：视窗,viewBox和preserveAspectRatio部分
参考自: http://www.w3cplus.com/html5/svg-coordinate-systems.html © w3cplus.com

先来放一个自己写的效果：
这里写图片描述

是不是很酷！！！

none:        没有颜色
<color>:     常规的颜色值。RGBA, HSBA都支持。
currentColor:可以让路径绘制的文字直接继承父标签的color颜色值。

stroke-width 表示描边的粗细。

stroke-linecap 表示描边端点表现方式。可用值有：butt, round, square, inherit.

stroke-linejoin 表示描边转角的表现方式。可用值有：miter, round, bevel, inherit.

stroke-miterlimit 表示描边相交（锐角）的表现方式。默认大小是4.

stroke-dasharray 表示虚线描边。可选值为：none, <dasharray>, inherit. 

none表示不是虚线；
<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值，也可以是百分比值；
inherit表继承。

stroke-dashoffset 表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。

stroke-opacity 表示描边透明度。默认是1.

viewport：
你可以在最外层元素上使用width和height属性声明视窗尺寸
视窗的初始坐标原点(0,0)在视窗的左上角，X轴正向指向右，Y轴正向指向下，初始坐标系中的一个单位等于视窗中的一个”像素”。
viewBox：这个可以声明自己的用户坐标系。
viewBox属性接收四个参数值，包括：<min-x>, <min-y>, width 和 height。
<min-x> 和 <min-y> 值决定viewBox的左上角，width和height决定视窗的宽高。这里要注意视窗的宽高不一定和父<svg>元素的宽高一样。
preserveAspectRatio：
当视窗的宽高比和用户坐标宽高比不同时就会使得svg发生形变，而preserveAspectRatio属性就是强制统一缩放比来保持图形的宽高比。
preserveAspectRatio = defer? <align> <meetOrSlice>?
– defer声明是可选的，并且只有当你在上添加preserveAspectRatio才被用到。在svg中显然没啥用。
– align参数声明是否强制统一放缩，如果是，对齐方法会在viewBox的宽高比不符合viewport的宽高比的情况下生效。
如果align值设为none，图形不再保持宽高比而会缩放来适应视窗。
– meetOrSlice也是可选的，默认值为meet。这个属性声明整个viewBox在视窗中是否可见。如果是，它和align参数通过一个或多个空格分隔。

stroke-dasharray: 虚线的疏密程度

stroke-dashoffset: 偏移

@keyframes stroke {
100% {
stroke-dashoffset: -400; } }

设置好stroke-dasharray，通过改变stroke-dashoffset来实现动画，思路很简单，就看你的想象力了。

六、路径的长度
如果想知道路径，或线条的准确长度。可能需要借助JavaScript，类似下面的代码：

var path = document.querySelector('path');
var length = path.getTotalLength();

关注