在线编辑的一个东西，用的是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是基于xml格式的，创建标签节点需要有命名空间

　　把createElement改成createElementNS就可以了

　　

let changeEle = document.createElementNS("http://www.w3.org/2000/svg", 'path');

JS创建SVG的问题的更多相关文章

  1. js创建svg元素的方法

    需要JQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. JS控制SVG缩放+鼠标控制事件

    话不多说,直接上代码吧,不行你砍我... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. js操作svg整体缩放

    首先我们先创建一个svg整体布局,代码如下: <!DOCTYPE html> <html> <head> <title>js操作svg实现整体缩放< ...

  4. Walkway.js – 创建简约的 SVG 线条动画

    Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法.只需根据提供的配置对象创建一个新的 Walkway 实例就可以了.这种效果特别适合那些崇尚简约设计风格的网页.目前, W ...

  5. JS动态创建SVG元素并绑定事件

    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.set ...

  6. Dynamics.js - 创建逼真的物理动画的 JS 库

    Dynamics.js 是一个用来创建物理动画 JavaScript 库.你只需要把dynamics.js引入你的页面,然后就可以激活任何 DOM 元素的 CSS 属性动画,也可以用户 SVG 属性. ...

  7. 用Backbone.js创建一个联系人管理系统(五)

    原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...

  8. 使用 iosOverlay.js 创建 iOS 风格的提示和通知

    iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...

  9. Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景

    Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...

随机推荐

  1. 【VS开发】从sockaddr中取得客户端或者数据源的Ip地址和端口号

    在socket编程中,服务器端accept()等待一个客户端的连接,当连接成功后,accept拷贝客户端的地址信息到sin_addr里面,我们如何从sin_addr取得此客户端的Ip地址和端口号呢? ...

  2. 图解JavaScript闭包面试题

    由于最近在学习关于闭包相关的知识,并且闭包这个知识点让我有点搞不太清楚其具体的定义,所以在网上也查阅了很多大佬的讲解和对闭包的一个定义. 最后感觉还是MDN上的说法感觉比较好理解一些,对闭包还是不太理 ...

  3. 克隆指定的分支：git clone -b 分支名仓库地址

    克隆指定的分支:git clone -b 分支名仓库地址 git clone -b 分支名 仓库地址 -b 是在克隆的时候制定一个分支

  4. 用pytorch1.0快速搭建简单的神经网络

    用pytorch1.0搭建简单的神经网络 import torch import torch.nn.functional as F # 包含激励函数 # 建立神经网络 # 先定义所有的层属性(__in ...

  5. [SQL SERVER] - 还原数据库备份（SQL脚本），抛出 "System.OutOfMemoryException" 异常之解决

    背景 在 Microsoft SQL Server 2016 的查询窗体中,直接还原备份数据库的 SQL 脚本(99MB),抛出 Cannot execute script 异常: 原因 相关资料说: ...

  6. 2019秋季PAT甲级_备考总结

    2019 秋季 PAT 甲级 备考总结 在 2019/9/8 的 PAT 甲级考试中拿到了满分,考试题目的C++题解记录在这里,此处对备考过程和考试情况做一个总结.如果我的方法能帮助到碰巧点进来的有缘 ...

  7. centos7 为使用su命令的用户添加pam授权认证

    # 查看用户所属哪个组 groups 用户名 #查看当前有哪些用户运行程序 ps -aux|awk '{print $1}'|sort -rn|uniq -c|sort -rn # 清理不再使用的用户 ...

  8. 07 UML类图

    移步: https://www.cnblogs.com/coolstream/p/9572846.html

  9. LINUX驱动笔记 目录

    笔记参考了宋宝华老师的<Linux设备驱动开发详解:基于最新的Linux 4.0内核>以及韦东山老师的嵌入式驱动教程 笔记开发环境: 单板:第一章到第八章使用TINY4412-1611:第 ...

  10. 题解-APIO2019路灯

    problem \(\mathtt {loj-3146}\) 题意概要:一条直线上有 \(n+1\) 个点和 \(n\) 条道路,每条道路连通相邻两个点.在 \(q\) 个时刻内,每个时刻有如下两种操 ...