<div>
  operator =
  <label><input type="radio" name="operator" value="erode" checked onchange="onOperatorChange(arguments[0])" />erode</label>
  <label><input type="radio" name="operator" value="dilate" onchange="onOperatorChange(arguments[0])" />dilate</label>
</div>
<div>
  radius =
  <input type="number" step="0.1" value="1" oninput="onRadiusChange(arguments[0])" />
</div>
<br>

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150">
  <style>
    text {
      font-size: 3em;
    }
  </style>
  <filter id="myFilter">
    <feMorphology id="feMorphology" operator="erode" radius="1" />
  </filter>
  <text y="60%" filter="url(#myFilter)">文字</text>
  <circle cx="200" cy="50%" r="20%" fill="none" stroke="blue" stroke-width="3" filter="url(#myFilter)" />
</svg>

function onOperatorChange(e) {
  const feMorphology = document.getElementById("feMorphology");
  feMorphology.setAttribute("operator", e.target.value);
}

function onRadiusChange(e) {
  const feMorphology = document.getElementById("feMorphology");
  feMorphology.setAttribute("radius", e.target.value);
}