setInterval 函数内带有 mousemove 函数的 SVG 动画

我正在尝试使用 SVG 创建一些响应鼠标移动和随机移动的东西。

你可以在这里查看代码
https://jsfiddle.net/hass/Lfv2yjyf/ https://jsfiddle.net/hass/Lfv2yjyf/

$(document).ready(function(){
    var d = document;
    var mysvg = d.getElementById("mysvg");

    var mx,my,random,xmid,ymid,input;

    setInterval(function() {
        //svg size
        var svgw = $("svg").width();
        var svgh = $("svg").height();

        //center point of svg
        xmid = svgw/2;
        ymid = svgh/2;

        //random numbers
        random = {
            a: Math.floor(Math.random()*25),
            b: Math.floor(Math.random()*25),
            c: Math.floor(Math.random()*25)
        };

        //add event to svg
        mysvg.addEventListener("mousemove", function(e) {
            //aqcuire mouse position relative to svg
            mx = e.clientX;
            my = e.clientY;

            //add <path> to svg
            input = '<path d="M ' + xmid + ',' + ymid + ' l ' + 0 + ',' + 0 + ' ' + ((mx-xmid)/2) + ',' + random.a + ' ' + ((mx-xmid)-((mx-xmid)/2)) + ',' + ((my-ymid)-random.a) + ' ' + '" stroke="orange" stroke-width="7" stroke-linejoin="round" fill="none" />';
        });

        //display datas
        $("#status1").html("X Position : " + mx + "<br>Y Position: " + my + "<br><br>Center Point X: " + xmid + "<br><br>Center Point Y: " + ymid + "<br><br>Width: " + svgw + "<br>Height: " + svgh + "<br><br>Random Value a: " + random.a + "<br>Random Value b: " + random.b + "<br>Random Value c: " + random.c);

        $("#mysvg").html(input);
    }, 10);
});

我的问题是，中点线的随机移动仅在我移动鼠标时才会响应，我知道它不起作用，因为随机值仅通过鼠标移动获取。

我想做的是即使没有鼠标移动我也想要随机移动。

所以我想知道如何每 10 毫秒获取 setInterval 中全局对象的值或在“setInterval”函数中设置的任何值，但我更喜欢几乎每毫秒，这样我可以获得随机振动效果。

我还尝试在 mousemove 函数之外编写“路径”，它有效，这是我想要实现的目标

https://jsfiddle.net/hass/d2L4hda5/ https://jsfiddle.net/hass/d2L4hda5/

但这里的问题是当我检查控制台（浏览器开发工具→控制台选项卡）时，鼠标 x 和鼠标 y 的值是“NaN”。但渲染有效。

我不知道我在这里错过了什么。

所以我想获得一些建议，如果第二个链接是我想要实现的，并获得鼠标 x 和鼠标 y 的正确值或任何其他最有效的技术。

Regards.

我不完全确定你的问题在这里。您的问题是您在浏览器工具中似乎看不到 iof mx 和 my 的值吗？你打算如何阅读它们？请注意，它们不是全局变量。他们是当地的ready()功能。因此，例如，如果您只是键入，您将无法看到该值mx进入控制台。

另请注意，您不需要在每次调用间隔计时器函数时都添加 mousemove 事件处理程序。它可以是完全独立的。见下文。

$(document).ready(function(){
    var d = document;
    var mysvg = d.getElementById("mysvg");

    var mx,my,random,xmid,ymid,input;

    //svg size
    var svgw = $("svg").width();
    var svgh = $("svg").height();

    //center point of svg
    xmid = svgw/2;
    ymid = svgh/2;

    //add event to svg
    mysvg.addEventListener("mousemove", function(e) {
        //aqcuire mouse position relative to svg
        mx = e.clientX;
        my = e.clientY;
    });

    setInterval(function() {
        //random numbers
        random = {
            a: Math.floor(Math.random()*25),
            b: Math.floor(Math.random()*25),
            c: Math.floor(Math.random()*25)
        };

        //add <path> to svg
        input = '<path d="M ' + xmid + ',' + ymid + ' l ' + 0 + ',' + 0 + ' ' + ((mx-xmid)/2) + ',' + random.a + ' ' + ((mx-xmid)-((mx-xmid)/2)) + ',' + ((my-ymid)-random.a) + ' ' + '" stroke="orange" stroke-width="7" stroke-linejoin="round" fill="none" />';

        //display datas
        $("#status1").html("X Position : " + mx + "<br>Y Position: " + my + "<br><br>Center Point X: " + xmid + "<br><br>Center Point Y: " + ymid + "<br><br>Width: " + svgw + "<br>Height: " + svgh + "<br><br>Random Value a: " + random.a + "<br>Random Value b: " + random.b + "<br>Random Value c: " + random.c);

        $("#mysvg").html(input);
    }, 10);

});

html, body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

body {
    overflow: hidden;
}

#wrapper {
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    position: relative;
}

svg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    outline: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <p id="status1"></p>
    <svg id="mysvg" width="300" height="300"></svg>
</div>