通过点击svg 用js实现动态添加一个空心圆

最新推荐文章于 2024-08-11 13:12:40 发布

a small tree

最新推荐文章于 2024-08-11 13:12:40 发布

阅读量919

点赞数

本文链接：https://blog.csdn.net/qq_46027468/article/details/120179234

版权

代码如下

<!DOCTYPE html>
<html>
<body>
    <svg version="1.1"
    baseProfile="full"
    width="600" height="500"
    xmlns="http://www.w3.org/2000/svg" id="svg">
</svg>
<script src="../js/Jquery.js"></script>
<script>
$(function(){
    let $svg = $('#svg')
    let h = window.screen.height
    $svg.attr('height',h)
    var addCircle = function(x,y){
        let obj = document.createElementNS('http://www.w3.org/2000/svg','circle')     //必须用creatElementNS否则在svg上创建的节点显示不出来
    if(obj){
        obj.setAttribute('cx',x)      //定义圆心坐标x
        obj.setAttribute('cy',y)        //定义圆心坐标y
        obj.setAttribute('r',40)
        obj.setAttribute('fill',"transparent")   //定义填充颜色  这里写的是透明 看起来就像个空心圆了
        obj.setAttribute('stroke',"red")    //边框颜色
        obj.setAttribute('stroke-width',4)  //边框宽度
        $svg.append(obj)    //加入到svg中
    }
}
    $svg.click(function(e){    //点击事件
        addCircle(e.offsetX,e.offsetY)
    })
})
</script>
</body>
</html>