需要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. 开源的DirectUI界面开发库DUILIB试用demo (Win32程序)

    Demo 第三版源码VC2005工程(附全部.h,ansi/unicode lib,dll),下载地址:http://goo.gl/c0L7Q   开源项目地址:http://code.google. ...

  2. Java-Druid：Druid

    ylbtech-Java-Druid:Druid Apache Druid(孵化)是一个高性能的实时分析数据库. 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 ...

  3. Python基础---序列对象

    一.序列简介 数据结构是通过某种方式组织在一起的元素的集合. 容器(Container)是一种Python的数据结构,基本上是包含其他对象的任意对象.序列和映射(如字典)是两类主要的容器.集合(Set ...

  4. python 之 heapq (堆)

    堆的实现通过构造二叉堆,实为二叉树的一种:这种数据结构具有以下性质: 任意节点小于(或大于)它的后裔,最小元(或最大元)在堆的根上 堆总是一颗完整树.即除了最低层,其它层的节点都被元素填满,且最低层极 ...

  5. ArrayBlockingQueue的使用案例:

    ArrayBlockingQueue的介绍: ArrayBlockingQueue,顾名思义:基于数组的阻塞队列.数组是要指定长度的,所以使用ArrayBlockingQueue时必须指定长度,也就是 ...

  6. Spring容器管理各种文件

    1. 导入文件 <import resource="applicationContext-dataSource.xml" /> 2. 引用资源配置文件 <cont ...

  7. 732F Tourist Reform

    // CF 732F Tourist Reform // 思路:两遍tarjan // 找强联通分量 #include <bits/stdc++.h> using namespace st ...

  8. NOIP2018崩崩记

    比赛前,做做往年的题目,嗯,似乎都很水,400+绝对没问题,如果完全发挥,起码500+. 然而-- Day0 这天是运动会,信息学的同学们向老师请假来机房. 然后我在机房里刷往届的题目,信心倍增. 最 ...

  9. 廖雪峰Java10加密与安全-3摘要算法-3SHA-1算法

    1.SHA-1算法 SHA-1算法也是一种哈希算法. 输出160 bits/20bytes 由美国国家安全局开发 SHA-0/SHA-1/SHA-256/SHA-512 * SHA-0有问题,已经作废 ...

  10. 第三章 Odoo 12 开发之创建第一个 Odoo 应用

    Odoo 开发通常都需要创建自己的插件模块.本文中我们将通过创建第一个应用来一步步学习如何在 Odoo 中开启和安装这个插件.我们将从基础的开发流学起,即创建和安装新插件,然后在开发迭代中更新代码来进 ...