在线编辑的一个东西，用的是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. snakemake学习笔记

    什么是snakemake? snakemake 是一个流程搭建的工具,这里主要用来记录一些snakemake的使用方法 对于run或者shell部分的需要使用sample变量可以使用wildcards ...

  2. MacOS上使用Openconnect代替Cisco Anyconnect

    OpenConnect是一个Cisco Anyconnect的替代品,具有开源.易获取.可靠等优点.而官方版本的Cisco Anyconnect配置较为繁琐,需要在管理界面同时部署多平台客户端才能支持 ...

  3. Reids原理之IO模型

    众所周知Redis是单进程单线程的应用,在如今多核横行的时代,我们不免有疑问,单线程的redis怎么就成了高性能的代表 当有多个线程同时调用redis的时候,那么单线程的redis是怎么处理的呢,这里 ...

  4. 在被调用函数中获取资源及C++中的引用

    #include <iostream> using namespace std; struct Teacher{ char name[64]; int age; }; //在被调用函数 获 ...

  5. C++ new/delete详解及原理

    学了冯诺依曼体系结构,我们知道: 硬件决定软件行为,数据都是围绕内存流动的. 可想而知,内存是多么重要.当然,我们这里说的内存是虚拟内存(详情看Linxu壹之型). 1.C/C++内存布局 2.C语言 ...

  6. 如何利用 iTunes 把 m4a/wav 文件转成 MP3 格式

    MAC技巧 | 如何利用 iTunes 把 m4a/wav 文件转成 MP3 格式 - 简书

  7. Android--自定义Dialog style

    <style name="dialog" parent="@android:style/Theme.Dialog"> <item name=& ...

  8. react组件懒加载

    组件懒加载方式-:react新增的lazy const Alert = lazy(() => import('./components/alert')); export default func ...

  9. Java开发Hbase示例

    Java开发Hbase示例 使用Hbase操作数据 package com.sunteng.clickidc.test; import java.io.IOException; import java ...

  10. sva 基础语法

    断言assertion被放在verilog设计中,方便在仿真时查看异常情况.当异常出现时,断言会报警.一般在数字电路设计中都要加入断言,断言占整个设计的比例应不少于30%.以下是断言的语法: 1. S ...