<div>
  feOffset.dx = 
  <input type="number" min="-1" max="2" step="0.1" value="0.1" oninput="onDxChange(arguments[0])" />
</div>
<div>
  feOffset.dy = 
  <input type="number" min="-1" max="2" step="0.1" value="0.1" oninput="onDyChange(arguments[0])" />
</div>
<br>

<svg width="240" height="190" xmlns="http://www.w3.org/2000/svg" style="outline: 1px solid red">
  <defs>
    <image id="imgShanghai" width="200" height="150" href="https://webdav.iflyit.top/share/图片/city-shanghai-1.jpg" opacity="0.5" />
    <filter id="myFilter" width="2" height="1.5" primitiveUnits="objectBoundingBox">
      <feOffset id="feOffset" dx="0.1" dy="0.1" />
    </filter>
  </defs>

  <use href="#imgShanghai"/>
  <use href="#imgShanghai" filter="url(#myFilter)"/>
</svg>

function onDxChange(e) {
  const feOffset = document.getElementById("feOffset")
  feOffset.setAttribute("dx", e.target.value)
}

function onDyChange(e) {
  const feOffset = document.getElementById("feOffset")
  feOffset.setAttribute("dy", e.target.value)
}