SVG案例：动态去创建元素createElementNS
案例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background:#;
}
#demo1{
width:780px;
height:400px;
background:url(images/bg.jpg) no-repeat;
margin:20px auto;
overflow:hidden;
} </style>
<script type="text/javascript">
/*
中心点
x : 780/2 = 390
y : 400/2 = 200
*/
//一条线的中心坐标 x :（100+390）/2 = 245
// y : (100+200) /2 = 150
</script>
</head>
<body>
<div id="demo1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g style="cursor:pointer">
<line x1="" y1="" x2="" y2="" stroke="#eee"></line>
<!--为解决用户鼠标经过 线 出现手势光标效果 需要复制一份线-->
<line x1="" y1="" x2="" y2="" stroke="transparent" stroke-width=""></line>
<!--rect 居中方法：默认起点是左上角, y=y-width/; x=x-height/ -->
<rect x="" y="" width="" height="" fill="#999" rx="" ></rect>
<!-- text 文字居中方法：y=y+字体的大小/ x=x+字体大小/ -->
<text x="" y="" font-size="" fill="white" text-anchor="middle">?</text>
</g>
<g style="cursor:pointer">
<circle cx="" cy="" r="" stroke="red" stroke-width="" fill="white"></circle>
<text x="" y="" font-size="" text-anchor="middle">凤凰网</text>
</g>
<g style="cursor:pointer">
<circle cx="" cy="" r="" stroke="red" stroke-width="" fill="white"></circle>
<text x="" y="" font-size="" text-anchor="middle" font-family="黑体">NBA</text>
</g>
</svg>
</div>
</body>
</html>
案例二：
动态去创建
创建元素
1、createElementNS
-两个参数
-命名空间，标签名
2、封装createTag函数
3、分离数据
Demo1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background:#;
}
#demo1{
width:780px;
height:400px;
background:url(images/bg.jpg) no-repeat;
margin:20px auto;
overflow:hidden;
} </style>
<script type="text/javascript">
/*
创建元素
1、createElementNS
-两个参数
-命名空间，标签名
2、封装createTag函数
3、分离数据
*/
window.onload = function (){
//普通创建元素
//document.createElement('div'); //SVG 创建元素
//document.createElementNS(s,t), 包含2个参数,s->命名空间；t->标签元素
var svgNS = 'http://www.w3.org/2000/svg'; //命名空间
var oSvg = document.createElementNS(svgNS,'svg'); //创建了一个svg元素
var oDemo1 = document.getElementById('demo1'); oSvg.setAttribute('xmlns',svgNS);
oSvg.setAttribute('width','100%');
oSvg.setAttribute('height','100%');
oDemo1.appendChild(oSvg);
}
</script>
</head>
<body>
<div id="demo1"></div>
</body>
</html>
Demo2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background:#;
}
#demo1{
width:780px;
height:400px;
background:url(images/bg.jpg) no-repeat;
margin:20px auto;
overflow:hidden;
} </style>
<script type="text/javascript">
window.onload = function (){
var svgNS = 'http://www.w3.org/2000/svg';
var oDemo1 = document.getElementById('demo1'); function createTag(tag,objAttr){
var oTag = document.createElementNS(svgNS,tag);
for(var attr in objAttr){
oTag.setAttribute(attr,objAttr[attr]);
}
return oTag;
} var oSvg = createTag('svg',{'xmlns':svgNS,'width':'100%','height':'100%'});
var oG = createTag('g',{'style':'cursor:pointer'});
var oLine1 = createTag('line',{'x1':'','y1':'','x2':'','y2':'','stroke':'#eee'})
var oLine2 = createTag('line',{'x1':'','y1':'','x2':'','y2':'','stroke':'transparent','stroke-width':''});
var oRect = createTag('rect',{'x':'','y':'','fill':'#999','width':'','height':'','rx':''});
var oText = createTag('text',{'x':'','y':'','fill':'white','font-size':'','text-anchor':'middle'})
oText.innerHTML = '?';
oG.appendChild(oLine1);
oG.appendChild(oLine2);
oG.appendChild(oRect);
oG.appendChild(oText); oSvg.appendChild(oG);
oDemo1.appendChild(oSvg);
}
</script>
</head>
<body>
<div id="demo1">
</div>
</body>
</html>
Demo3:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>svg</title>
<style>
#demo1{ width:780px; height:400px; background:url(images/bg.jpg) no-repeat; margin:20px auto; overflow:hidden;}
body{ background:black;}
</style>
<script>
//780/2 -> x : 390
//400/2 -> y : 200 //(100 + 390)/2 -> 中心点x : 245
//(100 + 200)/2 -> 中心点y : 150 window.onload = function(){
var svgNS = 'http://www.w3.org/2000/svg';
var oParent = document.getElementById('demo1');
var centerX = oParent.offsetWidth/;
var centerY = oParent.offsetHeight/; var data = {
centerNode : { text : 'NBA' },
otherNode : [
{ x : , y : , text : '凤凰网' },
{ x : , y : , text : '新浪网' },
{ x : , y : , text : '搜狐网' }
]
}; function createTag(tag,objAttr){
var oTag = document.createElementNS(svgNS , tag);
for(var attr in objAttr){
oTag.setAttribute(attr , objAttr[attr]);
}
return oTag;
} function addTag(){
var oSvg = createTag('svg',{'xmlns':svgNS,'width':'100%','height':'100%'});
for(var i=;i<data.otherNode.length;i++){
addOtherTag( data.otherNode[i] , oSvg );
}
var oG = createTag('g',{'style':'cursor:pointer'});
var oCircle = createTag('circle',{'cx':centerX,'cy':centerY,'r':'','fill':'white','stroke':'red','stroke-width':''});
var oText = createTag('text',{'x':centerX,'y':centerY+,'font-size':'','text-anchor':'middle'});
oText.innerHTML = data.centerNode.text; oG.appendChild(oCircle);
oG.appendChild(oText); oSvg.appendChild(oG);
oParent.appendChild(oSvg);
} addTag(); function addOtherTag(otherAttr , oSvg){
var oG = createTag('g',{'style':'cursor:pointer'});
var oLine1 = createTag('line',{'x1':otherAttr.x,'y1':otherAttr.y,'x2':centerX,'y2':centerY,'stroke':'#ccc'});
var oLine2 = createTag('line',{'x1':otherAttr.x,'y1':otherAttr.y,'x2':centerX,'y2':centerY,'stroke':'transparent','stroke-width':''});
var oRect = createTag('rect',{'x': (otherAttr.x + centerX)/ - ,'y': (otherAttr.y + centerY)/ - ,'fill':'#999','width':'','height':'','rx':''});
var oText = createTag('text',{'x':(otherAttr.x + centerX)/,'y':(otherAttr.y + centerY)/ + ,'fill':'white','font-size':'','text-anchor':'middle'});
oText.innerHTML = '?'; oG.appendChild(oLine1);
oG.appendChild(oLine2);
oG.appendChild(oRect);
oG.appendChild(oText); oSvg.appendChild(oG); var oG = createTag('g',{'style':'cursor:pointer'});
var oCircle = createTag('circle',{'cx':otherAttr.x,'cy':otherAttr.y,'r':'','fill':'white','stroke':'red','stroke-width':''});
var oText = createTag('text',{'x':otherAttr.x,'y':otherAttr.y+,'font-size':'','text-anchor':'middle'});
oText.innerHTML = otherAttr.text; oG.appendChild(oCircle);
oG.appendChild(oText); oSvg.appendChild(oG);
}
}; </script>
</head> <body>
<div id="demo1"></div>
</body>
</html>
SVG案例：动态去创建元素createElementNS的更多相关文章
- SVG 案例：动态去创建分支节点，当鼠标经过某个节点时，分支线会高亮
css: <style> #div1{ width:780px; height:400px; background:#fff; margin:20px auto; overflow:hid ...
- js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
- JavaScript 、jQuery动态创建元素的关键字~
JavaScript动态创建元素: 1.创建元素 如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...
- Javascript:DOM动态创建元素实例应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS动态创建元素
动态添加标签,可从服务器获取标签文本,然后加载到指定div中,可用于权限控制. 1.添加标签字符串方式 var str='<div>5555555555555555555555555555 ...
- jquery利用appendTo动态创建元素
动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...
- JS动态创建元素（两种方法）
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
- 解决jquery动态创建元素绑定事件失效问题
存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...
- 3、jquery_动态创建元素
动态创建元素:$('<b>javier</b>') $('#Button1').append($('<b>javier</b>')) 等价于 $($( ...
随机推荐
- 批量redis未授权检测工具&批量redis弱口令爆破工具
今天需要然后就百度搜索了一波,然后自己稍微改了一下: #!/usr/bin/python3 # -*- coding: utf-8 -*- """ @Author: 偷来 ...
- JWT校验流程源码
目录 一. jwt token校验源码简析 1.1 前言 1.2 jwt的authenticate方法 二. jwt的RefreshJSONWebToken 返回目录 一. jwt token校验源码 ...
- 补充JavaScript
1 JavaScript概述 1.1 ECMAScript和Javascript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准 ...
- hdu2112 dijkstra
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/2112/ 只要需处理一下字符串,给他个编号再跑一半dijkstra就行. 代码如下: #include<bi ...
- AI的博弈论，一份插图教程
介绍 我想先问一个简单的问题--你能认出下图中的两个人吗? 我肯定你说对了.对于我们这些早期数学发烧友来说,电影<美丽心灵>(A Beautiful Mind)已经深深地印在了我们的记忆中 ...
- Kaggle竞赛入门（二）：如何验证机器学习模型
本文翻译自kaggle learn,也就是kaggle官方最快入门kaggle竞赛的教程,强调python编程实践和数学思想(而没有涉及数学细节),笔者在不影响算法和程序理解的基础上删除了一些不必要的 ...
- [poj1797]Heavy Transportation<最大生成树prim&kruskal>
题目链接:http://poj.org/problem?id=1797 题意:给定n个点,m条边,每条边连接两点切有权值.求点1到点n的路径的上的最小边的值最大... 翻别人博客找到的题,方法挺多的, ...
- Day13 流程控制
Linux中的流程控制语句 一.if语句 1.单分支if条件语句 格式:if [ 条件判断式 ] then 程序 fi 注意:1.在Linux中是以if开头,fi结尾.其他地方一般是{开头,} ...
- springboot集成通用mapper详细配置
通常,我们利用mybatis写持久层方法.要么按照传统定义mapper方法,定义xml文件的方式,全部手写.要么需要通过mybatis-generator逆向工程插件生成大量的xxxExample文件 ...
- E1. String Coloring (easy version)（贪心）
E1. String Coloring (easy version) time limit per test 1 second memory limit per test 256 megabytes ...