需要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. Python-线程(1)

    目录 什么是线程 进程与线程的区别 开启线程 为什么要使用线程 线程之间数据是共享的 什么是线程 线程与进程都是虚拟单位,目的是为了更好的描述某种事物 进程与线程的区别 进程:资源单位 线程:执行单位 ...

  2. 【自家测试】2017-12-16　FJOI2016 d1

    1. 所有公共子序列问题(allcs.pas/c/cpp)★问题描述:一个给定序列的子序列是在该序列中删去若干元素后得到的序列.确切地说,若给定序列X= x 1 x 2 ... x m ,则另一序列Z ...

  3. django-rest-framework-jwt的使用

    一简介 JWT 是一个开放标准(RFC 7519),它定义了一种用于简洁,自包含的用于通信双方之间以 JSON 对象的形式安全传递信息的方法.该信息可以被验证和信任,因为它是数字签名的.JWTS可以使 ...

  4. Mysql修改表备注， 列信息

    1.添加表和字段的注释 创建数据表的同时,给表和字段添加注释 -- 创建用户信息表 CREATE TABLE tb_user ( id INT AUTO_INCREMENT PRIMARY KEY C ...

  5. lumen框架使用Elasticsearch详解

    该博文是集合几个博客踩坑得来的,百度热搜前几篇都是缺胳膊少腿的,所以结合几篇博客实现了一遍. 一.lumen使用Elasticsearch 首先需要搭建好的elasticsearch环境: http: ...

  6. 上传本地项目到码云(gitee)

    1.码云上创建一个项目比如zhirong 2.本地创建一个文件夹F:\workspace\zhirong-items,进入zhirong-items打开git bash 3.执行git init ,这 ...

  7. python 第三方库的安装方法

    一.看更大的python世界 python 全球计算生态的主站:python 社区 www.pypi.org 二.安装第三方库 1) pip 命令安装方法 1.1 安装第三方库 命令行输入pip in ...

  8. 使用scrapy框架来进行抓取的原因

    在python爬虫中:使用requests + selenium就可以解决将近90%的爬虫需求,那么scrapy就是解决剩下10%的吗? 这个显然不是这样的,scrapy框架是为了让我们的爬虫更强大. ...

  9. 11-2-break

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

  10. 第一次个人项目【词频统计】——PSP表格

    PSP2.1 任务内容 计划完成需要的时间(min) 实际完成需要的时间(min) Planning 计划 45 40 Estimate 估计这个任务需要多少时间,并规划大致工作步骤 30 20 De ...