在线编辑的一个东西，用的是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. R画柱形图和箱线图

    数据格式如下 gene_id Sham-1 Sham-2 Sham-3 Sham-4 Sham-5 Rep-1h-1 Rep-1h-2 Rep-1h-3 Rep-1h-4 Rep-1h-5 Rep-3 ...

  2. git当前项目免密提交

    在项目目录下,执行: vim .git/config 在url后边添加用户名密码即可 ``` [core] repositoryformatversion = filemode = true bare ...

  3. java面向函数编程简单应用

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; import java.util.functio ...

  4. 公钥、私钥、数字签名、数字证书、对称与非对称算法、HTTPS

    作者: yoyoso https://my.oschina.net/ioslighter/blog/359207 对公钥和私钥有点稀里糊涂的,搜索了一些资料,作一些整理吧,先看这个: 加密--公钥 看 ...

  5. WUSTOJ 1302: 区间k大数查询（Java）

    题目链接:

  6. 机器学习之softmax回归笔记

    本次笔记绝大部分转自https://www.cnblogs.com/Luv-GEM/p/10674719.html softmax回归 Logistic回归是用来解决二类分类问题的,如果要解决的问题是 ...

  7. go 数据渲染到html页面 02

    渲染到浏览器页面 //把数据渲染到浏览器 package main import ( "fmt" "text/template" "net/http& ...

  8. 『Python基础』第20节：深浅copy

    一. 赋值运算 l1 = [1, 2, 'conan', [11, 22]] l2 = l1 l1[0] = 111 print(l1) # [111, 2, 'conan', [11, 22]] p ...

  9. Make Square CodeForces - 1028H (dp)

    大意: 若一个序列存在两个数的积为完全平方数, 则为好序列. 给定序列$a$, 每次询问求子区间$[l,r]$最少修改多少次可以成为好序列, 每次修改可以任选素数$p$, 任选一个数乘或除$p$. $ ...

  10. GoLand中同一个目录下的package无法调用

    代码结构: 三个代码的package 都是 pipefilter,执行split_filter_test.go 就会提示   undefined:xxxxxxx Golang实际都可以自己补全另一个文 ...