Javascript 如何设置内联svg填充的动画以随鼠标位置（在父div中）更改

是否可以对内联svg路径的填充设置动画，以便随着鼠标在页面上的移动而改变

在下面代码片段的示例中，使用“mousemove”事件和事件对象的screenX和screenY属性监视鼠标的x和y位置。根据这些坐标设置红色和绿色值，并构造rgb填充颜色字符串并将其应用于SVG路径元素

var path=document.querySelector（“路径”）；
document.body.addEventListener（“mousemove”，函数（evt）{
var xRatio=Math.min（1，evt.clientX/document.body.offsetWidth）；
var yRatio=Math.min（1，evt.clientY/document.body.offsetHeight）；
var red=parseInt（255*xRatio）；
var green=parseInt（255*yRatio）；
var color=“rgb（“+red+”，“+green+”，128）”；
document.querySelector（“路径”）.setAttribute（“填充”，颜色）；
});
正文{
边框：纯黑1px；
填充：0.5em；
}
p{
保证金：0；
}

将鼠标移到图像上以查看颜色变化效果

是的，你坚持做这件事的哪一部分？