JS创建SVG的问题
在线编辑的一个东西,用的是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的问题的更多相关文章
- js创建svg元素的方法
需要JQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JS控制SVG缩放+鼠标控制事件
话不多说,直接上代码吧,不行你砍我... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- js操作svg整体缩放
首先我们先创建一个svg整体布局,代码如下: <!DOCTYPE html> <html> <head> <title>js操作svg实现整体缩放< ...
- Walkway.js – 创建简约的 SVG 线条动画
Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法.只需根据提供的配置对象创建一个新的 Walkway 实例就可以了.这种效果特别适合那些崇尚简约设计风格的网页.目前, W ...
- JS动态创建SVG元素并绑定事件
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.set ...
- Dynamics.js - 创建逼真的物理动画的 JS 库
Dynamics.js 是一个用来创建物理动画 JavaScript 库.你只需要把dynamics.js引入你的页面,然后就可以激活任何 DOM 元素的 CSS 属性动画,也可以用户 SVG 属性. ...
- 用Backbone.js创建一个联系人管理系统(五)
原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...
- 使用 iosOverlay.js 创建 iOS 风格的提示和通知
iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...
- Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景
Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...
随机推荐
- 基于vue-cli、elementUI的Vue简单入门例子
vue-cli.elementUI的安装教程请看: https://www.cnblogs.com/joe235/p/12013818.html 把HelloWorld.vue文件修改为: <t ...
- Freemarker讲解
FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP.它不仅可以用作表现层的实现 ...
- QuickTime专业版 pro 注册码
打开QuickTime Player下拉编辑菜单--选偏好设置--注册 Name: Dawn M Fredette Key: 4UJ2-5NLF-HFFA-9JW3-X2KV 重新启动 QuickTi ...
- 在ensp上配置通过Telent登录系统
本实验模拟公司网络场景,路由器R1是公司机房的一台设备,公司员工的办公区 与机房不在同一个楼层,路由器R2和R3模拟员工主机,通过交换机S1与机房设备相 连.为了方便用户的管理,现需要在路由器R1上配 ...
- P1993 小K的农场(差分约束)
小K的农场 题目描述 小K在MC里面建立很多很多的农场,总共n个,以至于他自己都忘记了每个农场中种植作物的具体数量了,他只记得一些含糊的信息(共m个),以下列三种形式描述: 农场a比农场b至少多种植了 ...
- 【MIT 6.824 】分布式系统 课程笔记(一)
Lecture 02 Infrastructure: RPC & threads 一.多线程挑战 共享数据: 使用互斥信号量.或者避免共享 线程间协作: 使用channels 或者 waitg ...
- MIT6.824食用过程
MIT6.824食用过程 Lab1 MapReduce 一.介绍 本实验使用Go语言构建一个mapreduce库,以及一个容错的分布式系统.第一部分完成一个简单的mapreduce程序,第二部分写一个 ...
- ALV报表——ALV颜色设置(三)
目录 一.行 二.列 三.单元格 四.附ALV的颜色代码 一.行:用Layout相关属性设置 代码: *Report ZRFI001_XFL_TEST REPORT ZRFI001_XFL_TEST ...
- gulp做的前端代码压缩报错,揭示具体错误 信息
用gulp做的前端代码压缩,今天在打包的时候发现打包出错了.报的错误是--unable to minify JavaScript.但是至于为什么会不能打包,表示很困惑,然后通过一番搜索,最后得出了问题 ...
- jQuery控制页面滚动条上下滚动
.向上滚动 $(); .向下滚动 $(); 参数解读:$(this)表示要实现上下滚动的对象,-50表示向上滚动50px , +50表示向下滚动50px ,1000表示滚动速度