案例一：

<!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的更多相关文章

  1. SVG 案例：动态去创建分支节点，当鼠标经过某个节点时，分支线会高亮

    css: <style> #div1{ width:780px; height:400px; background:#fff; margin:20px auto; overflow:hid ...

  2. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  3. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  4. Javascript:DOM动态创建元素实例应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JS动态创建元素

    动态添加标签,可从服务器获取标签文本,然后加载到指定div中,可用于权限控制. 1.添加标签字符串方式 var str='<div>5555555555555555555555555555 ...

  6. jquery利用appendTo动态创建元素

    动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...

  7. JS动态创建元素（两种方法）

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

  8. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

  9. 3、jquery_动态创建元素

    动态创建元素:$('<b>javier</b>') $('#Button1').append($('<b>javier</b>')) 等价于  $($( ...

随机推荐

  1. IOS抓包工具Stream——让移动端的抓包变得轻而易举

    有一天下晚班回家,在地铁上的时候,开发发来信息说,能不能把之前创建的bug再抓包看下数据.顿时心里就想,在地铁上,我上哪抓包去.之后百度了下,发现ios有一款非常实用的抓包工具,大家可以上App St ...

  2. Splunk 基本使用

    Splunk 作为大数据搜索处理软件,作为行业的翘楚,绝对值得探索和学习,Splunk能实时对任何应用程序.服务器或者网络设备的数据和数据源进行搜索和索引,包括任何位置的日志.配置文件.信息.陷阱和预 ...

  3. 判断网站CMS

    1.robots.txt文件 robots.txt文件我们写过爬虫的就知道,这个文件是告诉我们哪些目录是禁止爬取的.但是大部分的时候我们都能通过robots.txt文件来判断出cms的类型 如: 从w ...

  4. Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）

    本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

  5. Docker镜像拉取慢的解决方法

    镜像加速器配置: 下文配置引用于阿里云说明文档:https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors 1. 安装/升级Docker客户 ...

  6. HDU 1754 I hate it 树状数组维护区间最大值

    Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写 ...

  7. nginx使用手册+基本原理+优缺点

    一.nginx优点 1.反向代理 1.正向代理: 客户端和原始服务器(origin server)之间的服务器,为了从原始服务器取得内容,客户端向代理发送一个请求并指定目标(原始服务器),然后代理向原 ...

  8. coding++ ：SQLyog 最新版本12.5-64bit 破解版

    点我下载 SQLyog 12.5-64bit 版本(包含注册码)

  9. linux部署win服务 dotnet mono jexus

    .Net Core (dotnet C#应用) dotnet 可以用在linux上运行 C#应用 适用于 SSO 统一身份认证系统 # 安装依赖 yum install libunwind yum i ...

  10. js函数基础回顾

    回头又跑去看了下尚硅谷的js基础视频 https://www.bilibili.com/video/av22958172/?p=51. 便做了如下笔记: 1.函数也是一个对象 2.函数可以封装一些功能 ...