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 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...
随机推荐
- snakemake学习笔记
什么是snakemake? snakemake 是一个流程搭建的工具,这里主要用来记录一些snakemake的使用方法 对于run或者shell部分的需要使用sample变量可以使用wildcards ...
- MacOS上使用Openconnect代替Cisco Anyconnect
OpenConnect是一个Cisco Anyconnect的替代品,具有开源.易获取.可靠等优点.而官方版本的Cisco Anyconnect配置较为繁琐,需要在管理界面同时部署多平台客户端才能支持 ...
- Reids原理之IO模型
众所周知Redis是单进程单线程的应用,在如今多核横行的时代,我们不免有疑问,单线程的redis怎么就成了高性能的代表 当有多个线程同时调用redis的时候,那么单线程的redis是怎么处理的呢,这里 ...
- 在被调用函数中获取资源及C++中的引用
#include <iostream> using namespace std; struct Teacher{ char name[64]; int age; }; //在被调用函数 获 ...
- C++ new/delete详解及原理
学了冯诺依曼体系结构,我们知道: 硬件决定软件行为,数据都是围绕内存流动的. 可想而知,内存是多么重要.当然,我们这里说的内存是虚拟内存(详情看Linxu壹之型). 1.C/C++内存布局 2.C语言 ...
- 如何利用 iTunes 把 m4a/wav 文件转成 MP3 格式
MAC技巧 | 如何利用 iTunes 把 m4a/wav 文件转成 MP3 格式 - 简书
- Android--自定义Dialog style
<style name="dialog" parent="@android:style/Theme.Dialog"> <item name=& ...
- react组件懒加载
组件懒加载方式-:react新增的lazy const Alert = lazy(() => import('./components/alert')); export default func ...
- Java开发Hbase示例
Java开发Hbase示例 使用Hbase操作数据 package com.sunteng.clickidc.test; import java.io.IOException; import java ...
- sva 基础语法
断言assertion被放在verilog设计中,方便在仿真时查看异常情况.当异常出现时,断言会报警.一般在数字电路设计中都要加入断言,断言占整个设计的比例应不少于30%.以下是断言的语法: 1. S ...