<div>
  feSpecularLighting.lighting-color =
  <input id="lightingColor" type="color" value="#476CC2" oninput="onColorChange(arguments[0])" />
</div>
<div>
  feSpecularLighting.surfaceScale =
  <input id="surfaceScale" type="number" step="1" value="1" oninput="onSurfaceScaleChange(arguments[0])" />
</div>
<div>
  feSpecularLighting.specularConstant =
  <input id="specularConstant" type="number" step="0.1" value="1" min="0" oninput="onSpecularConstantChange(arguments[0])" />
</div>
<div>
  feSpecularLighting.specularExponent =
  <input id="specularExponent" type="number" step="0.1" value="1" min="0" oninput="onSpecularExponentChange(arguments[0])" />
</div>
<br>
<div>
  feDistantLight.azimuth = 
  <input id="azimuth" type="number" step="10" min="0" value="0" max="360" oninput="onAzimuthChange(arguments[0])" />
</div>
<div>
  feDistantLight.elevation = 
  <input id="elevation" type="number" step="10" min="0" value="0" max="360" oninput="onElevationChange(arguments[0])" />
</div>
<br>

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

  <!-- No light is applied -->
  <text text-anchor="middle" x="100" y="20">No Light</text>
  <circle id="myCircle" cx="100" cy="120" r="50" fill="green" />

  <filter id="filterLight">
    <feSpecularLighting id="feSpecularLighting" lighting-color="#476CC2" surfaceScale="1" result="specOut">
      <feDistantLight id="feDistantLight" azimuth="0" elevation="0" />
    </feSpecularLighting>
  </filter>
  <g transform="translate(200)">
    <text text-anchor="middle" x="100" y="20">feDistantLight 平行光</text>
    <use href="#myCircle" filter="url(#filterLight)" />
  </g>
</svg>

function onColorChange(e) {
  const feSpecularLighting = document.getElementById("feSpecularLighting");
  feSpecularLighting.setAttribute("lighting-color", e.target.value);
}
function onSurfaceScaleChange(e) {
  const feSpecularLighting = document.getElementById("feSpecularLighting");
  feSpecularLighting.setAttribute("surfaceScale", e.target.value);
}
function onSpecularConstantChange(e) {
  const feSpecularLighting = document.getElementById("feSpecularLighting");
  feSpecularLighting.setAttribute("specularConstant", e.target.value);
}
function onSpecularExponentChange(e) {
  const feSpecularLighting = document.getElementById("feSpecularLighting");
  feSpecularLighting.setAttribute("specularExponent", e.target.value);
}
function onAzimuthChange(e) {
  const feDistantLight = document.getElementById("feDistantLight");
  feDistantLight.setAttribute("azimuth", e.target.value);
}
function onElevationChange(e) {
  const feDistantLight = document.getElementById("feDistantLight");
  feDistantLight.setAttribute("elevation", e.target.value);
}