<div>
  feFlood.x =
  <input type="number" min="-1" max="2" step="0.1" value="0.1" oninput="onXChange(arguments[0])" />
</div>
<div>
  feFlood.y =
  <input type="number" min="-1" max="2" step="0.1" value="0.1" oninput="onYChange(arguments[0])" />
</div>
<div>
  feFlood.flood-opacity =
  <input type="number" min="0" max="1" step="0.1" value="0.1" oninput="onOpacityChange(arguments[0])" />
</div>
<div>
  feFlood.flood-color =
  <input type="color" value="#00ff00" oninput="onColorChange(arguments[0])" />
</div>
<br>

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" style="outline: 1px solid red; overflow: visible">
  <defs>
    <filter id="myFilter" primitiveUnits="objectBoundingBox">
      <feFlood id="feFlood" x="0.1" y="0.1" width="1" height="1" flood-color="#00ff00" flood-opacity="0.1" />
    </filter>
  </defs>

  <rect width="100%" height="100%" fill="red" filter="url(#myFilter)" />
</svg>

function onXChange(e) {
  const feFlood = document.getElementById("feFlood")
  feFlood.setAttribute("x", e.target.value)
}

function onYChange(e) {
  const feFlood = document.getElementById("feFlood")
  feFlood.setAttribute("x", e.target.value)
}

function onOpacityChange(e) {
  const feFlood = document.getElementById("feFlood")
  feFlood.setAttribute("flood-opacity", e.target.value)
}

function onColorChange(e) {
  const feFlood = document.getElementById("feFlood")
  feFlood.setAttribute("flood-color", e.target.value)
}