<div>
  feSpecularLighting.lighting-color =
  <input id="lightingColor" type="color" value="#ffffff" 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>
  feSpotLight.z = 
  <input id="feSpotLightZ" type="number" step="1" value="10" oninput="onZChange(arguments[0])" />
</div>
<div>
  feSpotLight.pointsAtX = 
  <input id="pointsAtX" type="number" step="5" value="100" oninput="onPointsXChange(arguments[0])" />
</div>
<div>
  feSpotLight.pointsAtY = 
  <input id="pointsAtY" type="number" step="5" value="120" oninput="onPointsYChange(arguments[0])" />
</div>
<div>
  feSpotLight.pointsAtZ = 
  <input id="pointsAtZ" type="number" step="5" value="0" oninput="onPointsZChange(arguments[0])" />
</div>
<div>
  feSpotLight.specularExponent = 
  <input id="specularExponent" type="number" step="5" value="1" oninput="onSpecularExponentChange(arguments[0])" />
</div>
<div>
  feSpotLight.limitingConeAngle = 
  <input id="limitingConeAngle" type="number" step="5" value="45" oninput="onLimitingConeAngleChange(arguments[0])" />
</div>
<br>
<div>
  feComposite.k1 =
  <input id="K1" type="number" step=".1" value="0" oninput="onK1Change(arguments[0])" />
</div>
<div>
  feComposite.k2 =
  <input id="K2" type="number" step=".1" value="1" oninput="onK2Change(arguments[0])" />
</div>
<div>
  feComposite.k3 =
  <input id="K3" type="number" step=".1" value="1" oninput="onK3Change(arguments[0])" />
</div>
<div>
  feComposite.k4 =
  <input id="K4" type="number" step=".1" value="0" oninput="onK4Change(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">
    <feSpecularLighting id="feSpecularLighting" lighting-color="#ffffff" surfaceScale="1" result="spotlight">
      <feSpotLight id="feSpotLight" x="100" y="120" z="10" pointsAtX="100" pointsAtY="120" pointsAtZ="0" specarExponent="1" limitingConeAngle="45" />
    </feSpecularLighting>
    <feComposite id="feComposite" in="SourceGraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
  </filter>
  <g transform="translate(200)">
    <text text-anchor="middle" x="100" y="20">feSpotLight 聚光灯</text>
    <use href="#myCircle" filter="url(#filterLight)" />
  </g>
  <circle id="myPoint" cx="300" cy="120" r="5" fill="red" />
  <line id="myLine" x1="300" y1="120" x2="300" y2="120" stroke="red" />
  <circle id="myPointAt" cx="300" cy="120" r="5" fill="blue" />
</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 onPointsXChange(e) {
  const feSpotLight = document.getElementById("feSpotLight");
  feSpotLight.setAttribute("pointsAtX", e.target.value);
  
  const x = +e.target.value + 200
  const myLine = document.getElementById("myLine");
  myLine.setAttribute("x2", x);
  const myPointAt = document.getElementById("myPointAt");
  myPointAt.setAttribute("cx", x);
}
function onPointsYChange(e) {
  const feSpotLight = document.getElementById("feSpotLight");
  feSpotLight.setAttribute("pointsAtY", e.target.value);
  
  const myLine = document.getElementById("myLine");
  myLine.setAttribute("y2", e.target.value);
  const myPointAt = document.getElementById("myPointAt");
  myPointAt.setAttribute("cy", e.target.value);
}
function onPointsZChange(e) {
  const feSpotLight = document.getElementById("feSpotLight");
  feSpotLight.setAttribute("pointsAtZ", e.target.value);
}
function onSpecularExponentChange(e) {
  const feSpotLight = document.getElementById("feSpotLight");
  feSpotLight.setAttribute("specularExponent", e.target.value);
}
function onLimitingConeAngleChange(e) {
  const feSpotLight = document.getElementById("feSpotLight");
  feSpotLight.setAttribute("limitingConeAngle", e.target.value);
}
function onK1Change(e) {
  const feComposite = document.getElementById("feComposite");
  feComposite.setAttribute("k1", e.target.value);
}

function onK2Change(e) {
  const feComposite = document.getElementById("feComposite");
  feComposite.setAttribute("k2", e.target.value);
}

function onK3Change(e) {
  const feComposite = document.getElementById("feComposite");
  feComposite.setAttribute("k3", e.target.value);
}

function onK4Change(e) {
  const feComposite = document.getElementById("feComposite");
  feComposite.setAttribute("k4", 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 feSpotLight = document.getElementById("feSpotLight");
  // 因为 g.transform="translate(200)"，所以这里需要减去 200
  feSpotLight.setAttribute("x", e.offsetX - 200);
  feSpotLight.setAttribute("y", e.offsetY);
}