首页 > 其他 > 详细

求助求助求助前端+svg

时间:2019-11-04 11:49:38      阅读:69      评论:0      收藏:0      [点我收藏+]

在线编辑的一个东西,用的是js+svg,遇到了这样一个问题,就是说我监听页面的单击事件,然后记录下来鼠标单击的位置,给svg添加子标签,然后页面上展示出来

说的可能不大清楚,上代码吧

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

<svg width="800px" height="400px" id="svg"  xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M261,242L164,177"></path>
</svg>

<script>
    var sum = 1;
    var startPoint;
    var endPoint;
    document.addEventListener(click, (e) => {
        // console.log(e.clientX, e.clientY);
        if (sum === 1){
           startPoint = "M"+ e.clientX + ,+ e.clientY;
            sum += 1;

        }else{
            endPoint = L + e.clientX + ,+ e.clientY;
            let changeEle = document.createElement(path);
            changeEle.setAttribute(d, startPoint + endPoint);
            document.getElementById(svg).appendChild(changeEle);
            console.log(document.getElementById(svg));
            startPoint = M + e.clientX + ,+ e.clientY;
        }
    })
</script>

</body>
</html>

技术分享图片

 

里面的第一个标签是原来就有的,然后我appendChild下面的标签,但是页面上并没有展示,把第一个标签注释第二个也没有显出来,到底是什么原因呢,求大佬帮助

 

求助求助求助前端+svg

原文:https://www.cnblogs.com/zhigu/p/11791205.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!