携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 >>>
🙈🙉最近在做公司官网，基本上静态的页面和动态的效果都已经完成的差不多了，准备给领导验收了，突然发现有些图不太对劲，按钮的底色在白底背景下显示不对，于是问UI重新要了张图，发现大小跟之前对不上了，于是便有了以上事情的经历...
❗❓svg的代码还能改？浅看一下
看到这些陌生的标签，人傻了..，feOffset、defs是啥，clipPath又是啥？😮
家人朋友们，话不多说，开始学习 💭
💡SVG？
让我们看看mdn上是怎么描述的, 一种用于描述二维的矢量图形，基于 XML 的标记语言 ，全称可缩放矢量图(Scalabel Vector Graphics)， SVG 能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
💡XML?
XML (Extensible Markup Language) 是一种类似于 HTML 的标记语言，但是 XML 没有使用预定义的标记。
📢 SVG的语法
1.svg标签
📣SVG代码都放在顶层标签svg之中，width属性和height属性，指定了SVG图像在HTML元素中占据的宽度和高度，除了相对单位，也可采用绝对单位(px)，如不指定两个属性，SVG图像默认大小是300px X 150px
📣viewBox属性的值有四个数，分别是坐上交的横坐标和纵坐标，视口的宽度和高度
2.circle标签
📣circle标签代表圆形，cx、cy、r属性分别未横坐标、纵坐标和半径，单位为像素，坐标都是相对于svg画布的左上角原点
CSS属性：
📣fill：填充色 stroke:描边色 stroke-width:边框宽度
3.rect标签
📣rect标签用于绘制矩形
4.defs标签
📣被引用的容器，相当于vue中的component
5.filter标签
📣用来定义SVG滤镜，使用必须的id属性来定义向图形使用哪个滤镜，filter起始和结束标记之间就是执行我们想要的操作的滤镜的基元。
🔎 feFlood元素
📣feFlood和feTile标签都是很实用的，允许我们在一系列滤镜基元内执行某些常见的操作，而不是主图形中创建额外的SVG元素
feFlood提供了一个纯色区域用于组合或者合并，我们只需要提供flood-color和flood-opacity，然后滤镜会完成其他工作
🔎 feColorMatrix元素
📣feColorMatrix元素允许我们以一种非常通用的方式来改变颜色值，是一个通用的基元，语序外面修改任意像素点的颜色或者阿尔法值。
当type属性等于matrix的时候，我们必须设置value为20个数字来描述变换信息，这20个数字按照4行5列编写最好理解，每一行代表一个代数方程，定义了如何计算输出的R、G、B、A值（按行的顺序）。每行中的数字分别乘以输入像素的RGBA的值和常量1，然后加在一起得到输出值
🔎 feGaussianBlur元素
📣每个基元有一个或多个输入，但只有一个输出。一个输入可以是原始图形(被指定为SourceGraphic)、图形的阿尔法(不透明度)通道(被指定为SourceAlpha)，或者是前一个滤镜基元的输出
当前使用的是feGaussianBlur滤镜基元，用stdDeviation属性指定它的模糊度，这个数值越大，模糊度越高。如果给stdDeviation值提供两个由空格分隔的数字，第一个数字被作为X方向的模糊度，而第二个被作为Y方向的模糊度
🔎 feComposite元素
📣feComposite元素接受两个输入源，分别指定在in和in2属性中，它的operator属性用于设置如何合并这两个输入源
operator的值有:in/out/over/atop/xor/arithmetic
feBlend in="A" in2="B" operator="m"/
over：A层叠在B上面
in：A的一部分重叠在B的不透明区域，类似于蒙版效果，这个蒙版仅仅基于B的阿尔法通道，而不是它的颜色亮度
out：A的一部分位于在B的不透明区域的外部
atop：A的一部分位于B里面，B的一部分在A外面
xor：包含 位于B的外面的A的部分 和 位于A的外面的B的部分
arithmeitc：灵活性最大，提供4个系数：k1、k2、k3、k4，每个像素的每个通道的结果按照如下方式计算: k1AB+k2A+k3B+k4，这里的A和B是来自输入图形像素的颜色分量。
🔎 feBlend元素
📣滤镜还提供了另一种合并图像的方式，同样feBlend元素需要两个输入源，分别指定在in和in2属性中，mode属性用于设置如何混合输入源。
mode可能的值有:normal/multiply/screen/lighten/darken
feBlend in="A" in2="B" mode="m"/
normal：B覆盖在A上，只有B
multiply:对于每个颜色通道，将A的值和B的值相乘。由于颜色值在0-1之间，所以相乘会让他们更小，会加深颜色，对于暗色或者非常强烈的颜色，效果最明显
screen:把每个通道的颜色值加在一起，然后减去它们的乘积。这个效果类似有两台不同的幻灯机，每个图像用一个幻灯机，然后照在同一个屏幕上
darken:提取A和B的每个通道的最小值
lighten:提取A和B的每个通道的最大值
🚀🚀火速了解完上面的标签元素后，针对UI提出的问题，将对应投影大小的值，修改了一下就大功告成~
