在线编辑的一个东西，用的是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. C/C++ 多线程（程序猿面试重点）CodeBlocks-CB的pthreads使用

    C++ 多线程 本文主要讲一下C++多线程 线程好处 ·使用线程可以把占据长时间的程序中的任务放到后台去处理 ·程序的运行速度可能加快 可以释放一些珍贵的资源如内存占用等等. 但是多线程是为了同步完成 ...

  2. LeetCode 232. 用栈实现队列(Implement Queue using Stacks) 4

    232. 用栈实现队列 232. Implement Queue using Stacks 题目描述 使用栈实现队列的下列操作: push(x) -- 将一个元素放入队列的尾部. pop() -- 从 ...

  3. 关于/etc/rc.local

    /etc/rc.d/rc.local 用于添加开机启动命令 /etc/rc.local是/etc/rc.d/rc.local的软连接 简单来说 开机自启的

  4. Java 非访问修饰符

    除了访问性修饰符,我们还有非访问性修饰符.这里主要说明static与final修饰符,其他修饰符以后用到再说. 一.static修饰符 static修饰符是用来修饰方法与变量. 1.创建StaticT ...

  5. Spyder中报错： Check failed: PyBfloat16_Type.tp_base != nullptr

    报错问题: 问题1:tensorflow/python/lib/core/bfloat16.cc:675] Check failed: PyBfloat16_Type.tp_base != nullp ...

  6. 从NV12中裁剪子画面注意事项

    1. 裁剪时,Y和UV的地址计算: / **** * pa_yuv_main: yuv首地址 * video_frame.loff: 行偏移量 lineoffset * VDO_SIZE_W.VDO_ ...

  7. Spring Cloud Alibaba学习笔记（9） - RocketMQ安装与RocketMQ控制台

    搭建RocketMQ 系统环境准备 64位操作系统,推荐使用Linux.Unix.MacOS 64位 JDK1.8+ Maven 3.2.x 适用于Broker服务器的4g +可用磁盘 下载与搭建 下 ...

  8. docker安装及基本使用

    docker分为docker CE 和docker EE,CE即免费社区版,EE即企业付费版.下面基于centos7安装docker CE,其它linux版本可以参考官方文档https://docs. ...

  9. wcf Origin

    WebHttpBinding bd = new WebHttpBinding(); //WebServiceHost sh = new WebServiceHost(typeof(Bl_x), new ...

  10. Git pull记住密码

    在使用https git拉取代码时,每次git pull的时候都会让输入用户名和密码 进入项目目录 命令:git config --global credential.helper store 然后会 ...