前端提高篇(七十一)：SVG基本知识（二）路径属性、渐变、滤镜

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

var move = document.getElementById(‘move’);

var total = move.getTotalLength();//获取弧线的长度

move.style.strokeDasharray = total + ‘px’;//设置stroke-dasharray

var storke_num = 0;

//设置定时器，每隔100ms缩进10px，直至弧线完整被缩进一次

var timer = setInterval(function(){

storke_num +=10;

if (storke_num < total){

move.style.strokeDashoffset = storke_num + ‘px’;

}else{

clearInterval(timer);

move.style.strokeDashoffset = total + ‘px’;

}

}, 100)

运行效果：

渐变

---

**线性渐变：linearGradient

径向渐变：radialGradient**

SVG 渐变必须在 标签中进行定义

线性渐变linearGradient：官网链接

<stop offset=“0%” style="stop-color:rgb(255,255,0);

stop-opacity:1"/>

<stop offset=“100%” style="stop-color:rgb(255,0,0);

stop-opacity:1"/>

<ellipse cx=“200” cy=“190” rx=“85” ry=“55”

style=“fill:url(#orange_red)”/>

效果：从上到下渐变，id为"orange_red"，设置在需要这个渐变的元素上面

径向渐变radialGradient：官网链接

<radialGradient id=“grey_blue” cx=“50%” cy=“50%” r=“50%”

fx=“50%” fy=“50%”>

<stop offset=“0%” style="stop-color:rgb(200,200,200);

stop-opacity:0"/>

<stop offset=“100%” style="stop-color:rgb(0,0,255);

stop-opacity:1"/>

<ellipse cx=“230” cy=“200” rx=“110” ry=“100”

style=“fill:url(#grey_blue)”/>

效果：

滤镜

---

高斯模糊：官网链接

其他滤镜：官网链接

必须在 标签中定义 SVG 滤镜

高斯模糊：

在canvas是对每个像素的rgba数据做高斯计算后，put回canvas

在svg提供了高斯模糊feGaussianBlur标签：

效果：

此处有一个svg的在线编辑器：

在线编辑工具Method Draw：地址

菜鸟教程提供的svg在线编辑器：地址

画了图形之后，可以保存成文件，在ide中打开看代码，也可以在“视图”—“源代码”，在线查看代码，复制到自己的html文件里，保存，打开就可以看到画的图案了

视图viewBox

---

viewport是我们在svg上设置的宽高属性圈出来的范围，viewBox才是svg真正的坐标系统

设置viewBox之后，svg画图以这个视图大小为准，超过视图的部分不显示

path {

stroke: #000;

fill: transparent;

stroke-width: 3px;

}

效果：

在svg(width=‘400’ height=‘400’)上设置视图viewBox='0,0,40,40'，原本弧度的参数是：d='M 100 100 A 70 120 90 1 1 150 200'，在svg上不能显示，需要缩小到原来的1/10，才能显示

但线宽依然是3px，所以看起来就像设置了30px一样，或者说，将d='M 10 10 A 7 12 9 1 1 15 20'弧放大了10倍，从角度也可以看出，svg矢量图，放大不失真

preserveAspectRatio保持宽高比（作用对象都是viewBox）

preserveAspectRatio = ‘xMidYMid meet’//居中显示

参数1：viewBox在svg中对齐方式

参数2：宽高比

meet：保持纵横比缩放viewBox适应viewport

slice：保持纵横比同时比例小的方向放大填满viewport（在均匀缩放的同时保持viewport的宽高比）

none：不保持自己的宽高，扭曲宽高比以充分适应viewport

当svg得到宽高比与自己的viewbox宽高比不同的图片，会在保持宽高比的前提下，对图片进行缩放，保证不变形，然后把图片挪到视图中心位置，图片不一定铺满整个视图

我们可以通过设置，让图片不居中，或者有cover的效果：放大图片冲出viewBox，让图片的短边铺满viewBox

下图为cover效果，红色代表图片，黑色框代表viewBox，红色框的高为短边，将其放大到与viewBox同高，宽边等比例放大，冲出viewBox区域

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-H7un10vQ-1713476977343)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！