SVG feTurbulence滤镜baseFrequency属性实例页面

效果：

拖动滑杆：

代码：

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.05" />
  </filter>

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

拖动滑杆：<input type="range" id="range" min="0.01" max="0.99" step="0.01" value="0.05" 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);
});