<div>
  lighting-color = 
  <input id="lightingColor" type="color"value="#ffffff" oninput="onColorChange(arguments[0])" />
</div>
<div>
  fePointLight.z = 
  <input id="fePointLightZ" type="number" step="1" value="10" oninput="onZChange(arguments[0])" />
</div>
<div>
  fePointLight.surfaceScale = 
  <input id="surfaceScale" type="number" step="1" value="1" oninput="onSurfaceScaleChange(arguments[0])" />
</div>
<div>
  fePointLight.diffuseConstant = 
  <input id="diffuseConstant" type="number" step="0.1" value="1" min="0" oninput="onDiffuseConstantChange(arguments[0])" />
</div>
<br>

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" onmousemove="onMouseMove(arguments[0])">

  <!-- 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">
    <feDiffuseLighting id="feDiffuseLighting" lighting-color="white" surfaceScale="1">
      <fePointLight id="myPointLight" x="50" y="70" z="10" />
    </feDiffuseLighting>
  </filter>
  <g transform="translate(200)">
    <text text-anchor="middle" x="100" y="20">fePointLight 点光源</text>
    <use href="#myCircle" filter="url(#filterLight)" />
  </g>
  <circle id="myPoint" cx="250" cy="70" r="5" fill="red" />
  <line id="myLine" x1="250" y1="70" x2="300" y2="120" stroke="red" />
</svg>

body {
  background-color: 
}

function onColorChange(e) {
  const feDiffuseLighting = document.getElementById("feDiffuseLighting");
  feDiffuseLighting.setAttribute("lighting-color", e.target.value);
}
function onSurfaceScaleChange(e) {
  const feDiffuseLighting = document.getElementById("feDiffuseLighting");
  feDiffuseLighting.setAttribute("surfaceScale", e.target.value);
}
function onDiffuseConstantChange(e) {
  const feDiffuseLighting = document.getElementById("feDiffuseLighting");
  feDiffuseLighting.setAttribute("diffuseConstant", e.target.value);
}
function onZChange(e) {
  const myPointLight = document.getElementById("myPointLight");
  myPointLight.setAttribute("z", e.target.value);
}
function onMouseMove(e) {
  console.log(e)
  const myPoint = document.getElementById("myPoint");
  myPoint.setAttribute("cx", e.offsetX);
  myPoint.setAttribute("cy", e.offsetY);
  const myLine = document.getElementById("myLine");
  myLine.setAttribute("x1", e.offsetX);
  myLine.setAttribute("y1", e.offsetY);

  const myPointLight = document.getElementById("myPointLight");
  // 因为 g.transform="translate(200)"，所以这里需要减去 200
  myPointLight.setAttribute("x", e.offsetX - 200);
  myPointLight.setAttribute("y", e.offsetY);
}