#yyds干货盘点#用SVG画一个月亮 _盘点

丈夫志四海，万里犹比邻。这篇文章主要讲述#yyds干货盘点#用SVG画一个月亮相关的知识，希望能为你提供帮助。
用SVG画一个月亮废话不多说，直接上代码
html：

< !DOCTYPE html> < html lang="en" > < head> < meta charset="UTF-8"> < title> 中秋月亮倒影< /title> < link rel="stylesheet" href="https://www.songbingjia.com/android/css/style.css"> < /head> < body> < svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> < filter id="sketch"> < feTurbulence type="fractalNoise" baseFrequency=".05 .5" numOctaves="3" result="noise1"> < /feTurbulence> < feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2"> < animate attributeName="values" from="0" to="360" dur="1.5s" repeatCount="indefinite"/> < /feColorMatrix> < feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="60" in="SourceGraphic" in2="noise2" /> < /filter> < /svg> < div> < /div> < /body> < /html>

css：

body background: linear-gradient(#28f, #03a); height: 100vh; div width: 10vw; height: 10vw; background-color: #ff9; border-radius: 50%; position: absolute; top: calc(50% - 5vw); left: calc(50% - 5vw); -webkit-filter: url(#sketch); filter: url(#sketch); box-shadow: 0 0 0 5vw rgba(255, 255, 255, 0.15);

没错就是这个简单，下面给大家分析一下制作原理：
首先使用css画一个
重点是倒影效果的制作我们用到的技术是SVG
什么是SVG呢？
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
feTurbulence
feTurbulence是湍流滤镜可以实现云朵、大理石质感、烟雾、火焰效果等很多很酷的效果。
feTurbulence滤镜创建的图像效果采用的是Perlin湍流函数算法，可以生成Perlin Noise（Perlin噪声、柏林噪声）。
【#yyds干货盘点#用SVG画一个月亮】type属性值是fractalNoise和turbulence
turbulence
默认值。表示湍流、混乱。
fractalNoise
表示分形噪声。
baseFrequency的属性值的水平和垂直的噪点频率比是1:10，因此，会有类似水平拉伸的效果
属性numOctaves就表示倍频的数量，默认值是1，不能是小数，只能是整数，如果是小数会当作默认值1处理。倍频可以理解为由频率和振幅定义的噪声函数。feTurbulence滤镜效果就是通过频率增加而幅度减小的几个倍频叠加建立起来的。
feColorMatrix
色彩矩阵的滤镜，用一个的矩阵计算，將圆片的色彩重新计算后输出，便可以达到各种不同的色彩变化效果
type属性值为hueRotate表示对色相的改变，values 值表示角度，也就是色相环要旋转的角度。
animate顾名思义就是动画的意思了
feDisplacementMap
feDisplacementMap实际上是一个位置替换滤镜，就是改变元素和图形的像素位置的。
scale表示计算后的偏移值相乘的比例，scale越大，则偏移越大
xChannelSelector对应XC(x,y)，表示X轴坐标使用的是哪个颜色通道进行位置偏移。颜色有RGBA四个通道，R表示red红色，G表示green绿色，B表示blue蓝色，A表示alpha可以理解为透明度。因此，xChannelSelector属性值可以是R、G、B、A中的任意一个，默认是A，基于透明度进行位置偏移。
yChannelSelector和xChannelSelector类似，只是一个是x轴（横轴）方向，一个是y轴（纵轴）方向
效果：