#yyds干货盘点#用SVG画一个月亮
Posted 温哈哈哈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#用SVG画一个月亮相关的知识，希望对你有一定的参考价值。
用SVG画一个月亮
废话不多说，直接上代码
html：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>中秋月亮倒影</title>
<link rel="stylesheet" href="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噪声、柏林噪声）。
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轴（纵轴）方向
效果：
以上是关于#yyds干货盘点#用SVG画一个月亮的主要内容，如果未能解决你的问题，请参考以下文章
#yyds干货盘点#愚公系列2022年09月 微信小程序-WebGL画正方形
#yyds干货盘点 react笔记之引入FontAwesome