<!-- <div>
  edgeMode：
  <label><input type="radio" name="edgeMode" value="duplicate" checked onchange="onEdgeModeChange(arguments[0])" />duplicate</label>
  <label><input type="radio" name="edgeMode" value="wrap" onchange="onEdgeModeChange(arguments[0])" />wrap</label>
  <label><input type="radio" name="edgeMode" value="none" onchange="onEdgeModeChange(arguments[0])" />none</label>
</div> -->
<div>
  <label>
    stdDeviation：
    <input id="stdDeviation" type="number" min="0" value="5" oninput="onStdDeviationChange(arguments[0])" />
  </label>
</div>
<div>
  <label>
    垂直方向：
    <input id="stdDeviationV" type="number" min="0" oninput="onStdDeviationVChange(arguments[0])" />
  </label>
</div>

<br>
<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg" style="overflow: visible">
  <defs>
    <g id="imgShanghai">
      <image width="400" height="300" href="https://webdav.iflyit.top/share/图片/city-shanghai-1.jpg" />
      <text x="25%" y="60%" text-anchor="middle" font-size="60" fill="darkGreen">上海</text>
    </g>
    <filter id="blurMe">
      <feGaussianBlur id="feBlur" stdDeviation="5" />
    </filter>
  </defs>

  <g>
    <use href="#imgShanghai" />
    <text x="25%" y="15%" text-anchor="middle" font-size="40" fill="red">原始图片</text>
  </g>

  <g transform="translate(400)">
    <use href="#imgShanghai" filter="url(#blurMe)" />
    <text x="25%" y="15%" text-anchor="middle" font-size="40" fill="red">高斯模糊</text>
    <text x="25%" y="30%" text-anchor="middle" font-size="20" fill="blue" id="blurText">stdDeviation="5"</text>
  </g>
</svg>

function onEdgeModeChange(e) {
  const feBlur = document.getElementById("feBlur");
  feBlur.setAttribute("edgeMode", e.target.value);
}

function onStdDeviationChange(e) {
  update();
}

function onStdDeviationVChange(e) {
  if (e.target.value === "0") {
    e.target.value = undefined;
  }
  update();
}

function update() {
  const feBlur = document.getElementById("feBlur");

  let stdDeviation = document.getElementById("stdDeviation").value;
  const stdDeviationV = document.getElementById("stdDeviationV").value;

  if (stdDeviationV) {
    stdDeviation += ` ${stdDeviationV}`;
  }

  feBlur.setAttribute("stdDeviation", stdDeviation);

  const blurText = document.getElementById("blurText");
  blurText.innerHTML = `stdDeviation="${stdDeviation}"`;
}