需要JQuery



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

    <link rel="stylesheet" href="http://v3.faqrobot.org/hvb/com/css/reset.css?dev=1">

    <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script>

    <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/base.js?dev=1"></script>

    <title>svg</title>

    <style>

        body, html {

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

    <svg width="400" height="300" viewBox="0 0 400 300">

        <path id="textPath" d="M10,10 L40,60 L20,80 L60,90 L70,20 Z" stroke="red" fill="none"></path>

        <text stroke="red" fill="green" font-size="30" font-family="Microsoft YaHei"></text>

    </svg>

<script>

    ;$(function() {

        //创建圆

        var $circle = createSvg('circle', {

            'cx': '50',

            'cy': '50',

            'r': '20',

        }).appendTo('svg');  

        //创建文本路径

        var $textPath = createSvg('textPath', {

            'xlink:href': '#textPath',

        }).text('123456').appendTo('text');

        //创建svg相关元素

        function createSvg(tag, attr) {

            if(!document.createElementNS) return;//防止IE8报错

            var $svg = $(document.createElementNS('http://www.w3.org/2000/svg', tag));

            for(var key in attr) {

                switch(key) {

                    case 'xlink:href'://文本路径添加属性特有

                        $svg[0].setAttributeNS('http://www.w3.org/1999/xlink', key, attr[key]);

                    break;

                    default:

                    $svg.attr(key, attr[key]);

                }

            }

           return $svg;

        };

    });

</script>

</body>

</html>

js创建svg元素的方法的更多相关文章

  1. JS动态创建SVG元素并绑定事件

    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.set ...

  2. 创建HTML元素的方法

    第一种:使用 parent.appendchild()方法 HTML页面 <div id="div1"></div> JS文件 //第一步创建标签元素节点 ...

  3. JS选取DOM元素的方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今 ...

  4. js 中移动元素的方法

    2017-12-13 19:59:24 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. JS创建SVG的问题

    在线编辑的一个东西,用的是js+svg,遇到了这样一个问题,就是说我监听页面的单击事件,然后记录下来鼠标单击的位置,给svg添加子标签,然后页面上展示出来 说的可能不大清楚,上代码吧 <!DOC ...

  6. js 创建html元素 渲染html元素

    var p1 = document.getElementById('p1'); //添加的元素类型及属性var newNode = document.createElement("input ...

  7. JS创建 trim（） 方法，此方法在IE7、IE8中不存在 需要自定义

    function trim(str){ //创建空格对象 var space = new String(" "); /* str = trimLeft(str,space); st ...

  8. JS 去除重复元素的方法

    Array.prototype.del = function () { var a = {}, c = [], l = this.length; ; i < l; i++) { var b = ...

  9. js 创建xml元素

    function createXML(pathData) { var xmlDOM = createXMLDOM(); //参考:http://iceworldvip.blog.51cto.com/5 ...

随机推荐

  1. 2-sat——暴力染色输出方案hdu1814

    因为要求输出字典序最小的解,所以用暴力染色 具体有点像二分图染色 遍历0-2*n-1个点,尝试将每个点染成1,该点所能到达的所有点都要染成1 如果不行,则把上该点的影响消除,再把对立点染成1,如果还不 ...

  2. Ubuntu下使用SSH 命令用于登录远程桌面

    https://blog.csdn.net/yucicheung/article/details/79427578 问题描述 做DL的经常需要在一台电脑(本地主机)上写代码,另一台电脑(服务器,计算力 ...

  3. 使用python和tableau对数据进行抓取及可视化

    使用python和tableau对数据进行抓取及可视化 本篇文章介绍使用python抓取贷款及理财平台的数据,并将数据拼接和汇总.最终通过tableau进行可视化.与之前的python爬虫文章 不同之 ...

  4. python基础数据类型初始，用户交互

    一.基础数据类型初始 1.数字:int  1,2,3 print(100,type(100)) ',type('100')) 查看数据类型的方法:type()函数 取值范围: int(整型) 在32位 ...

  5. Swagger发布服务器时错误 500 : { "Message": "An error has occurred." }

    在做Web API的文档自动生成时,本机调试都正常,发布到服务器上出现500错误 500 : { "Message": "An error has occurred.&q ...

  6. scrapy中下载文件和图片

    下载文件是一种很常见的需求,例如当你在使用爬虫爬取网站中的图片.视频.word.pdf.压缩包等的时候 scrapy中提供了FilesPipeline和ImagesPipeline,专门用来下载文件和 ...

  7. 玩转大数据之Apache Pig如何与Apache Lucene集成

     在文章开始之前,我们还是简单来回顾下Pig的的前尘往事: 1,Pig是什么? Pig最早是雅虎公司的一个基于Hadoop的并行处理架构,后来Yahoo将Pig捐献给Apache(一个开源软件的基金组 ...

  8. Activiti流程定义部署、删除

    1.部署流程定义 部署流程定义也可以认为是增加流程定义.  首先创建流程引擎对象(公用的方法)   private ProcessEngine processEngine = ProcessEngin ...

  9. Df- Linux必学的60个命令

    1.作用 df命令用来检查文件系统的磁盘空间占用情况,使用权限是所有用户. 2.格式 df [options] 3.主要参数 -s:对每个Names参数只给出占用的数据块总数. -a:递归地显示指定目 ...

  10. What is python .. (“dot dot”) notation syntax?

    What you have is a float literal without the trailing zero, which you then access the __truediv__met ...