2024年Web前端最全前端提高篇(七十一)：SVG基本知识（二）路径属性、渐变、滤镜，学习前端开发的步骤

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

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区域

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

s.csdn.net/topics/618166371)**

性能

linux

前端资料汇总