在线编辑的一个东西，用的是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. 记联想SR850 Raid配置的一个bug

    管理raid阵列时,如果要删除某个指定的阵列,则需要选中阵列名而不能选中虚拟磁盘.如果选中的是虚拟磁盘,点击删除后,会删除整个阵列列表里的第一个阵列,而非虚拟磁盘所在的阵列. 过程如下 联想SR850 ...

  2. zabbix4.2+grafana搭建骚气的监控运维平台

    Zabbix 是一个企业级分布式开源监控解决方案,其监控与告警功能十分强大.Grafana是一款开源的可视化软件,可以搭配数据源实现一个数据的展示和分析:Grafana功能强大,有着丰富的插件.两者结 ...

  3. idm技术下载百度网盘

    原使用教程:https://www.haorenka.org/idm.html 使用idm下载器后实际下载速度,比原网盘客户端快很多 相关软件下载 参考上面的参考教程,这里只提供对应所需要的文件,有的 ...

  4. 【ARM-Linux开发】ctrl-xxx的对应的signal含义

    ctrl-c 发送 SIGINT 信号给前台进程组中的所有进程.常用于终止正在运行的程序.ctrl-z 发送 SIGTSTP 信号给前台进程组中的所有进程,常用于挂起一个进程.ctrl-d 不是发送信 ...

  5. 反馈神经网络Hopfield网络

    一.前言 经过一段时间的积累,对于神经网络,已经基本掌握了感知器.BP算法及其改进.AdaLine等最为简单和基础的前馈型神经网络知识,下面开启的是基于反馈型的神经网络Hopfiled神经网络.前馈型 ...

  6. 二、部署DHCP

    *本文转自https://blog.51cto.com/lumay0526/2046957 简述 DHCP是Dynamic Host Configuration Protocol的缩写,中文称动态主机 ...

  7. 漏洞复现之JBoss 4.x JBossMQ JMS 反序列化漏洞（CVE-2017-7504）

    前言: 序列化就是把对象转换成字节流,便于保存在内存.文件.数据库中:反序列化即逆过程,由字节流还原成对象. Java中的ObjectOutputStream类的writeObject()方法可以实现 ...

  8. mybatis xml动态语句写法

    mapper.java: /** * @Description: 根据摄像机Id查询出入记录 * @Param: * name 姓名 * monitorId 布控ID * starttime 开始时间 ...

  9. 039 Android SQLite数据库(了解)

    1.介绍 注意:当有大量相似结构的数据需要存储的时候,需要使用数据库. 2.SQLiteOpenHelper简介 注意:数据库的创建方法总结: (1)定义一个类继承SQLiteOpenHelper o ...

  10. spring boot配置文件application.properties配置JPA以及数据源

    1.application.properties配置jpa模板 spring.datasource.url=jdbc:mysql://localhost:3306/springboottest?use ...