用svg圆跟随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qdabc.cn</title>
</head>
<body>

<svg id="mySvg" style="width: 600px; height: 300px; border: 1px solid blue;">
    <circle id="myCircle" cx="100" cy="100" r="30">

    </circle>
</svg>

<script>
    var svg = document. getElementById("mySvg");
    var circle = document.getElementById("myCircle");
    svg.onmousemove =function (event) {
        var  x = event.offsetX;
        var y= event .offsetY;
       circle.setAttribute("cx",x);
       circle.setAttribute("cy",y);
       //svg不能直接赋值
    }
</script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 用svg圆跟随鼠标移动

赞 (1)
分享到:更多 ()

发表评论 0