第四节 SVG滤镜 feTurbulence
2020-04-05 本文已影响0人
CODERLIHAO
baseFrequency
为了产生噪声，仅需要baseFrequency属性。 baseFrequency影响生成的噪声的大小（或比例）和粒度
把值设置为0.02 到0.2之间就可以满足大部分纹理场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>feTurbulence</title>
<style type="text/css">
label {
font-size: 1.5em;
display: block;
margin-bottom: 1em;
}
.wrapper {
max-width: 50%;
}
svg {
display: block;
width: 100%;
margin-top: 1em;
background: #fff;
}
</style>
</head>
<body>
<div class="wrapper">
<label for="bFControl">baseFrequency</label>
<input type="range" min="0.01" max="1" value="0.05" step="0.01" id="bFControl"/> <span id="value">0.05</span>
<svg width="250" height="250">
<filter id='noise' x='0%' y='0%' width='100%' height='100%'>
<feTurbulence baseFrequency="0.05"/>
</filter>
<rect x="0" y="0" width="100%" height="100%" filter="url(#noise)" fill="none"/>
</svg>
</div>
<script>
(function () {
var bFControl = document.getElementById("bFControl"),
bFSVG = document.querySelector("#bFControl ~ svg"),
effect = bFSVG.querySelector("feTurbulence"),
val = document.querySelector("#value");
bFControl.addEventListener("change", updatebFSVG);
bFControl.addEventListener("input", updatebFSVG);
function updatebFSVG() {
let v = bFControl.value;
val.innerText = v;
effect.setAttribute("baseFrequency", v);
}
})();
</script>
</body>
</html>
image.png
baseFrequency可以分别设置X方向和Y方向的粒度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>feTurbulence</title>
<style type="text/css">
label {
font-size: 1.5em;
display: block;
margin-bottom: 1em;
}
.wrapper {
max-width: 50%;
}
svg {
display: block;
width: 100%;
margin-top: 1em;
background: #fff;
}
</style>
</head>
<body>
<div class="wrapper">
<span>baseFrequencyX</span> <input type="range" min="0.01" max="1" value="0.05" step="0.01" id="bfx" /> <span id="sbfx">baseFrequencyX = 0.05</span><br/>
<span>baseFrequencyY</span> <input type="range" min="0.01" max="1" value="0.05" step="0.01" id="bfy" /> <span id="sbfy">baseFrequencyY = 0.05</span>
<svg id="bFSVG" width="250" height="250">
<filter id='noise' x='0%' y='0%' width='100%' height='100%'>
<feTurbulence baseFrequency="0.01 0.1" result="NOISE"/>
</filter>
<rect x="0" y="0" width="100%" height="100%" filter="url(#noise)"></rect>
</svg>
</div>
<script>
(function () {
var bFControlX = document.getElementById("bfx"),
bFControlY = document.getElementById("bfy"),
bFSVG = document.getElementById("bFSVG"),
effect = bFSVG.querySelector("feTurbulence"),
valX = document.querySelector("#sbfx"),
valY = document.querySelector("#sbfy");
bFControlX.addEventListener("change", updatebFSVG);
bFControlY.addEventListener("change", updatebFSVG);
bFControlX.addEventListener("input" , updatebFSVG);
bFControlY.addEventListener("input", updatebFSVG);
function updatebFSVG() {
let vx = bFControlX.value;
let vy = bFControlY.value;
valX.innerText = vx;
valY.innerText = vy;
effect.setAttribute("baseFrequency", vx + " "+ vy);
}
})();
</script>
</body>
</html>
image.png
type
- turbulence 会产生更多模拟波纹的线条，因此适合作为液体纹理的基础，这也是默认值
- fractalNoise 产生更浑浊且平滑的图案，是创建气体基础纹理（如云）的合适基础
image.png
image.png
numOctaves
表示噪声中的细节水平
<svg width="250" height="250">
<filter id='noise1' x='0%' y='0%' width='100%' height='100%'>
<feTurbulence baseFrequency="0.03" numOctaves="1" />
</filter>
<filter id='noise2' x='0%' y='0%' width='100%' height='100%'>
<feTurbulence baseFrequency="0.03" numOctaves="2" />
</filter>
<filter id='noise3' x='0%' y='0%' width='100%' height='100%'>
<feTurbulence baseFrequency="0.03" numOctaves="3" />
</filter>
<filter id='noise4' x='0%' y='0%' width='100%' height='100%'>
<feTurbulence baseFrequency="0.03" numOctaves="3" />
</filter>
<rect x="0" y="0" width="25%" height="100%" filter="url(#noise1)" fill="none"/>
<rect x="26%" y="0" width="25%" height="100%" filter="url(#noise2)" fill="none"/>
<rect x="52%" y="0" width="25%" height="100%" filter="url(#noise3)" fill="none"/>
<rect x="78%" y="0" width="25%" height="100%" filter="url(#noise4)" fill="none"/>
</svg>
image.png
参考：
https://tympanus.net/codrops/2019/02/19/svg-filter-effects-creating-texture-with-feturbulence/
