<div>
    scale：
    <input id="scale" type="number" min="0" step="1" value="20" oninput="onScaleChange(arguments[0])" />
</div>
<div>
  xChannelSelector：
  <label><input type="radio" name="xChannelSelector" value="R" checked onchange="onXChannelSelectorChange(arguments[0])" />R</label>
  <label><input type="radio" name="xChannelSelector" value="G"  onchange="onXChannelSelectorChange(arguments[0])" />G</label>
  <label><input type="radio" name="xChannelSelector" value="B"  onchange="onXChannelSelectorChange(arguments[0])" />B</label>
  <label><input type="radio" name="xChannelSelector" value="A"  onchange="onXChannelSelectorChange(arguments[0])" />A</label>
</div>
<div>
  yChannelSelector：
  <label><input type="radio" name="yChannelSelector" value="R" checked onchange="onYChannelSelectorChange(arguments[0])" />R</label>
  <label><input type="radio" name="yChannelSelector" value="G"  onchange="onYChannelSelectorChange(arguments[0])" />G</label>
  <label><input type="radio" name="yChannelSelector" value="B"  onchange="onYChannelSelectorChange(arguments[0])" />B</label>
  <label><input type="radio" name="yChannelSelector" value="A"  onchange="onYChannelSelectorChange(arguments[0])" />A</label>
</div>

<svg width="400" height="300">
    <defs>
        <filter id="myFilter" >
            <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" seed="1" result="turbulence">
                <animate attributeName="baseFrequency" values="0.01;0.03;0.01" dur="5s" repeatCount="indefinite" />
            </feTurbulence>
            <feDisplacementMap id="feDisplacementMap" scale="20" xChannelSelector="R" yChannelSelector="R" in2="turbulence" in="SourceGraphic">
            </feDisplacementMap>
        </filter>
    </defs>
    <image width="400" height="300"
        href="https://webdav.iflyit.top/share/图片/city-shanghai-1.jpg"
        filter="url(#myFilter)" />
</svg>

function onScaleChange(e) {
    const feDisplacementMap = document.getElementById("feDisplacementMap");
    feDisplacementMap.setAttribute("scale", e.target.value);
}

function onXChannelSelectorChange(e) {
    const feDisplacementMap = document.getElementById("feDisplacementMap");
    feDisplacementMap.setAttribute("xChannelSelector", e.target.value);
}

function onYChannelSelectorChange(e) {
    const feDisplacementMap = document.getElementById("feDisplacementMap");
    feDisplacementMap.setAttribute("yChannelSelector", e.target.value);
}