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

path {

stroke: #000;

fill: transparent;

stroke-width: 3px;

stroke-dasharray: 30px 40px;

}

效果：画了一条虚线，画30px，空40px，画30px…

如果写的是：

stroke-dasharray: 20px 30px 40px;

效果是：画20px，空30px，画40px，空20px…循环下去

stroke-dashoffset：线前面npx的位置被盖住了，后面的像素替补上来，就像抽了一条无限长的绳子，没有尽头

下图是dashoffset从0到30px的过程，虚线设置是stroke-dasharray: 30px 40px;：

到了第30px，原本30px的画线完全消失了，展示的是以40px的空白开始的虚线

做一个动画小demo，设置dasharray为300px，用计时器控制dashoffset的值，实现一条线左挪至消失

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

var storke_num = 0;

var timer = setInterval(function(){

storke_num +=10;

if (storke_num < 300){

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

}else{

clearInterval(timer);

move.style.strokeDashoffset = ‘300px’;

}

}, 100)

path {

stroke: #000;

fill: transparent;

stroke-width: 3px;

stroke-dasharray: 300px;

stroke-dashoffset: 0px;

}

注意最后清空计时器的时候，要把线的位置固定写在想要的位置，有时不是300/10这样刚好的值，可能是300/9，余下3px留在svg上，影响效果，直接固定最后一步到目标点上，善后

如果是一个圆形，不能提前知道它的长度，就需要使用getTotalLength()来获得其长度

css中的stroke-dash相关的两个属性注释掉，在js里设置

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画图以这个视图大小为准，超过视图的部分不显示

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

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

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

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

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

log.csdnimg.cn/img_convert/614771dc66a0fec7a3e33c2c7e1fa878.png)

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-ALTZvvUQ-1712905921807)]