html5手电筒样式,利用HTML5实现SVG模拟手电筒照明特效

特效描述：利用HTML5实现 SVG 模拟手电筒 照明特效。利用HTML5%20实现SVG模拟手电筒照明特效

代码结构

1. HTML代码

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

>

operator="arithmetic"

k1="1" k2="0" k3="0" k4="0">

width="450" height="300"

patternUnits="userSpaceOnUse"

>

width="450" height="300"

>

fill="url(#pattern1)" filter="url(#light)"

>

const svgNode = document.querySelector('svg');

const fePointLightNode = svgNode.querySelector('fePointLight');

svgNode.addEventListener('mousemove', handleMove);

svgNode.addEventListener('touchmove', handleMove);

function handleMove(event) {

fePointLightNode.setAttribute('x', event.clientX);

fePointLightNode.setAttribute('y', event.clientY);

}