纯CSS实现SVG路径描边动画效果

秒速五厘米 2022-06-05 02:18 340阅读 0赞

SVG中有一个比较重要度属性，stroke。stroke有很多兄弟属性：

1）stroke：线的颜色；

2）stroke-width：线的宽度；

3）stroke-linecap：线的端点，可用值有butt、round、square、inherit；

4）**stroke-dasharray**：虚线描边，可用值为none、<dasharray>（一个逗号或空格分隔的数值列表）、inherit。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承；

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

6）stroke-opacity：线的透明度。

**此次主要介绍stroke-dasharray和dash-offset两个属性。**

Html：

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg"> <line id="line" x1='0' y1='40' x2='70' y2='40'> </svg>

Css：

#line{ stroke: black; stroke-dasharray: 100; stroke-dashoffset: 0; }

此时能看到一条完整的线：  
![Center][]

若将stroke-offset设置为99，则整条线向左平移99个像素，

![Center 1][]

此时只能看到左右一个像素点，右边则为虚线部分，若将dash-offset设置为100，则只能看到虚线的部分，实线部分完全左移被遮挡。

此时，如果设置animation改变dash-offset的值就能实现黑色的实现向右平移的效果，达到动态描线的效果。

Css：

#line{ stroke: black; stroke-dasharray: 100; stroke-dashoffset: 100; transition: dash 1s all ease; }

@keyframes dash{ to{ stroke-dashoffset: 0; } }

**如果想知道路径或者线条的长度，可以借助以下代码：**

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

[Center]: /images/20220605/1feb3b3be6aa4e5fb7899c6c2400e61d.png
[Center 1]: /images/20220605/bb253c5e87d340589f9102d456bb8fa3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读

相关 157.纯CSS波浪段动画效果

效果 (源码网盘地址在最后) ![f3d695ff68925bc138926eb7029a8685.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来

水深无声/ 2022年10月20日 13:58/ 0 赞/ 237 阅读

相关纯css3 checkbox选中动画效果

[下载地址][Link 1]checkbox选中的动画特效，使用纯css3代码实现的checkbox复选框勾选的翻转动画效果。 ![1630545811.png][] dd

深碍√TFBOYSˉ_/ 2022年09月09日 15:48/ 0 赞/ 216 阅读

相关纯css实现粒子效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家好久没有更新的CSS3演武场系列，半年前搁浅的一篇文章赋予新年新气象闪亮登场了，研究一下利用css（sass）

小灰灰/ 2022年08月27日 10:49/ 0 赞/ 562 阅读

相关纯css实现回旋动画

css演武场今日继续，来看一个纯css实现的回旋动画。 ![SouthEast][] [在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。重点

╰半橙微兮°/ 2022年08月25日 14:49/ 0 赞/ 230 阅读

相关 SVG的路径动画效果

[![2dae5d63-adc7-4832-97f1-493ff9fc2e37.jpg][]][2dae5d63-adc7-4832-97f1-493ff9fc2e37.jpg

悠悠/ 2022年08月14日 02:59/ 0 赞/ 173 阅读

相关 Unity Shader-描边效果

简介描边效果是游戏里面非常常用的一种效果，一般是为了凸显游戏中的某个对象，会给对象增加一个描边效果。最近又跑回去玩了玩《剑灵》，虽然出了三年了，感觉在现在的网

缺乏、安全感/ 2022年07月13日 09:13/ 0 赞/ 220 阅读

相关纯CSS实现SVG路径描边动画效果

SVG中有一个比较重要度属性，stroke。stroke有很多兄弟属性： 1）stroke：线的颜色； 2）stroke-width：线的宽度； 3）stroke-lin

秒速五厘米/ 2022年06月05日 02:18/ 0 赞/ 341 阅读

相关 segment-实现SVG路径描边绘制与动画的轻量库

今天来一起了解一个实现SVG路径描边绘制与动画的轻量级类库[segment][]，我们从轻松上手、使用详解、资源和案例、源码解读等几个方面进行介绍。 ![图片描述][201

小灰灰/ 2022年05月26日 08:40/ 0 赞/ 226 阅读

相关用纯CSS实现加载中动画效果

HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut">

矫情吗；*/ 2022年03月31日 12:19/ 0 赞/ 573 阅读

相关 svg 动态描边时间戳

思路: 动态设置时间边框运动:文字不设置填充度,设置边框,将边框设置为虚线,动画中设置移动虚线实现多色:因为一个文字只能设置一种颜色,所以设

痛定思痛。/ 2021年07月24日 18:36/ 0 赞/ 408 阅读