<div>
  targetX =
  <input type="number" min="0" max="2" step="1" value="1" oninput="onTargetXChange(arguments[0])" />
</div>
<div>
  targetY =
  <input type="number" min="0" max="2" step="1" value="1" oninput="onTargetYChange(arguments[0])" />
</div>
<div>
  divisor =
  <input id="divisor" type="number" min="0.1" max="100" step="0.1" value="1" oninput="onDivisorChange(arguments[0])" />
</div>
<div>
  bias =
  <input type="number" min="0" max="100" step="0.1" value="0" oninput="onBiasChange(arguments[0])" />
</div>
<div>
  preserveAlpha =
  <label><input type="radio" name="preserveAlpha" value="true" onchange="onPreserveAlphaChange(arguments[0])" />true</label>
  <label><input type="radio" name="preserveAlpha" value="false" checked onchange="onPreserveAlphaChange(arguments[0])" />false</label>
</div>
<div>
  edgeMode =
  <label><input type="radio" name="edgeMode" value="none" checked onchange="onEdgeModeChange(arguments[0])" />none</label>
  <label><input type="radio" name="edgeMode" value="duplicate" onchange="onEdgeModeChange(arguments[0])" />duplicate</label>
  <label><input type="radio" name="edgeMode" value="wrap" onchange="onEdgeModeChange(arguments[0])" />wrap</label>
</div>
<div style="display: flex;">
  kernelMatrix =
  <table border style="margin-left: 10px;">
    <tr>
      <td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
      <td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
      <td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
    </tr>
    <tr>
      <td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
      <td><input class="matrix_values" type="number" value="-14" step="1" oninput="onKernelMatrixChange()" /></td>
      <td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
    </tr>
    <tr>
      <td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
      <td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
      <td><input class="matrix_values" type="number" value="8" step="1" oninput="onKernelMatrixChange()" /></td>
    </tr>
  </table>
</div>
<div>
  预设滤镜：
  <label><input type="radio" name="presetFilter" value="1 1 1 1 -14 1 1 1 8" checked onchange="onPresetChange(arguments[0])" />浮雕</label>
  <label><input type="radio" name="presetFilter" value="0 -3 0 -2 15 -4 0 -5 0" onchange="onPresetChange(arguments[0])" />纸片化</label>
  <label><input type="radio" name="presetFilter" value="6 8 7 1 0 1 1 1 8" onchange="onPresetChange(arguments[0])" />模糊</label>
  <label><input type="radio" name="presetFilter" value="0 2 0 -2 15 -4 0 -5 0" onchange="onPresetChange(arguments[0])" />锐利清晰</label>
</div>
<br>

<svg width="800" height="300" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="myFilter" x="0" y="0" width="100%" height="100%">
      <feConvolveMatrix id="feConvolveMatrix" order="3" kernelMatrix="1 1 1 1 -14 1 1 1 8" targetX="1" targetY="1" edgeMode="none" />
    </filter>
  </defs>

  <image href="https://webdav.iflyit.top/share/图片/flower-1.jpg" x="0" y="0" width="400" height="300"" />
  <image x=" 401" href="https://common-1301829111.cos.ap-shanghai.myqcloud.com/img%2Fflower-1.jpg" x="0" y="0" width="400" height="300" filter="url(#myFilter)" />

</svg>

function onTargetXChange(e) {
  const feConvolveMatrix = document.getElementById("feConvolveMatrix");
  feConvolveMatrix.setAttribute("targetX", e.target.value);
}
function onTargetYChange(e) {
  const feConvolveMatrix = document.getElementById("feConvolveMatrix");
  feConvolveMatrix.setAttribute("targetY", e.target.value);
}
function onDivisorChange(e) {
  const feConvolveMatrix = document.getElementById("feConvolveMatrix");
  feConvolveMatrix.setAttribute("divisor", e.target.value);
}
function onBiasChange(e) {
  const feConvolveMatrix = document.getElementById("feConvolveMatrix");
  feConvolveMatrix.setAttribute("bias", e.target.value);
}
function onPreserveAlphaChange(e) {
  const feConvolveMatrix = document.getElementById("feConvolveMatrix");
  feConvolveMatrix.setAttribute("preserveAlpha", e.target.value);
}
function onEdgeModeChange(e) {
  const feConvolveMatrix = document.getElementById("feConvolveMatrix");
  feConvolveMatrix.setAttribute("edgeMode", e.target.value);
}

function onKernelMatrixChange() {
  const matrix_values_inputs = document.getElementsByClassName("matrix_values");
  let values = "";
  for (let index = 0; index < matrix_values_inputs.length; ++index) {
    values += matrix_values_inputs[index].value;
    if (index !== matrix_values_inputs.length - 1) {
      values += " ";
    }
  }
  const feConvolveMatrix = document.getElementById("feConvolveMatrix");
  feConvolveMatrix.setAttribute("kernelMatrix", values);

  console.log(feConvolveMatrix.getAttribute("kernelMatrix"));

  const defaultDivisor = values.split(" ").reduce((pre, val) => pre + +val, 0);
  feConvolveMatrix.setAttribute("divisor", defaultDivisor);
  document.getElementById("divisor").value = defaultDivisor;
}

function onPresetChange(e) {
  const feConvolveMatrix = document.getElementById("feConvolveMatrix");
  feConvolveMatrix.setAttribute("kernelMatrix", e.target.value);

  const values = e.target.value.split(" ");
  const matrix_values_inputs = document.getElementsByClassName("matrix_values");

  for (let index = 0; index < matrix_values_inputs.length; ++index) {
    matrix_values_inputs[index].value = values[index];
  }

  const defaultDivisor = values.reduce((pre, val) => pre + +val, 0);
  feConvolveMatrix.setAttribute("divisor", defaultDivisor);
  document.getElementById("divisor").value = defaultDivisor;
}