在线编辑的一个东西，用的是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. php+memcache高速缓存

    原文地址:https://blog.csdn.net/qq_33571752/article/details/86494667 #在lnmp基础上修改 依赖libevent程序库 cd lnmp/ta ...

  2. Jira 自定义工作流并设置触发器

    一.添加修改工作流 打开 设置--问题--工作流 复制一个工作流,然后进去编辑页面 添加状态 增加转换动作 切换到文本,设置跳转过程中的事件 针对Stop Progress事件,修改跳转界面(界面需先 ...

  3. js原生导出excel和csv

    ​ 严格意义来说并不是真正的excel文件,只是可以用excel打开查看而已,实际上的格式是逗号分隔文件即csv文件. 这里有几个坑要说一下: 不加Unicode的utf8头部标识excel打开文件会 ...

  4. webpack package code into different bundle

    Demo4操作手册 本Demo演示如何进行分块打包等较高级的使用 准备环境 初始化环境, cd到demo1目录之后, 执行如下命令: npm init -y npm install webpack w ...

  5. [WCF] - Odata Service 访问失败，查看具体错误信息的方法

    Issue 解决 为 Data Service 配置属性如下:[System.ServiceModel.ServiceBehavior(IncludeExceptionDetailInFaults = ...

  6. Python11之列表2（获取、删除列表元素、列表分片、拷贝）

    一.获取列表元素值 列表名 [ 索引值 ] 注:索引值从0开始 nameList = ['詹姆斯','字母哥','乐福','威少','乔治','戴维斯'] nameList[0] '詹姆斯' name ...

  7. 使用keepalived实现kubenetes apiserver高可用

    # 安装 nginx yum install nginx -y # 配置nginx4层代理 /etc/nginx/nginx.conf stream { upstream kube-apiserver ...

  8. ~postman使用Runner

    1.准备参数的.text文件. postman支持三种参数的方式,分别为.text文件,.csv文件,json文件.此处使用.text文件.编码格式使用utf-8 2.替换请求参数 3.设置Runne ...

  9. go select 使得一个 goroutine 在多个通讯操作上等待。

    select 语句使得一个 goroutine 在多个通讯操作上等待. select 会阻塞,直到条件分支中的某个可以继续执行,这时就会执行那个条件分支.当多个都准备好的时候,会随机选择一个. pac ...

  10. C#7 进入快速迭代道路

    out变量 有一定C#编程经历的园友一定没少写如下这样的代码: int speed; if (int.TryParse(speedStr, out speed)) speed*=; 注释:int.Tr ...