SVG feTurbulence滤镜numOctaves属性实例页面

HTML代码：

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise" x="0" y="0" width="100%" height="100%">
    <feTurbulence id="feTurbulence" baseFrequency="0.02" numOctaves="1" />
  </filter>

  <rect x="0" y="0" width="300" height="200" style="filter: url(#noise);" />
</svg>

拖动滑杆：<input type="range" id="range" min="1" max="5" step="1" value="1"  data-tips="${value}" is="ui-range">
                

外链代码：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/edge/css/common/ui/Range.css">
<script type="module" src="https://qidian.gtimg.com/lulu/edge/js/common/ui/Range.js"></script>
                

JS代码：

var eleRange = document.querySelector('#range');
var eleFe = document.querySelector('#feTurbulence');

eleRange.addEventListener('input', function () {
    eleFe.setAttribute('baseFrequency', this.value);
});