用svg圆跟随鼠标移动

1325009640
1325009640 发布于 7 天前 浏览:180 类型:原创 - 随笔 分类:HTML/CSS - css 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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>
标签:
z
给个赞 0 人点赞
收藏 2 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
1325009640 1325009640 作者

作者最新