需要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. zabbix 自动发现端口服务监控教程

    目录 创建数据表(收集haproxy服务的信息) 针对生成的数据表做监控 在haproxy服务机器上配置 在zabbix上添加监控 前言: 1.线上业务使用了几十上百台haproxy服务,需要针对这些 ...

  2. 「BZOJ2391」Cirno的忧郁

    传送门 设p[0] = (-10001,-10001) 把所有点按p[0]极角排序, s[i][j]表示三角形p[0]p[i]p[j]内的总价值,若i到j极角增大则s为正,否则s为负. 那么答案就是按 ...

  3. 编程之法：面试和算法心得（旋转字符串java实现）

    内容全部来自编程之法:面试和算法心得一书,实现是自己写的使用的是java 题目描述 给定一个字符串,要求把字符串前面的若干个字符移动到字符串的尾部,如把字符串“abcdef”前面的2个字符'a'和'b ...

  4. highchart接收后台数据用法

    最近做数据分析的时候使用了highchart这个插件,从后台中接收数据的时候出了一些问题,记录下来免得以后忘了. $(function () { var list = {$weeklist}; var ...

  5. JS实用插件

    1. jQuery鼠标滚轮事件插件Mouse Wheel 下载链接:https://github.com/brandonaaron/jquery-mousewheel/ 使用方法: // using ...

  6. linux学习(一)-----vm、centos安装

    安装vm和Centos 1)先安装 virtual machine ,vm12 2)再安装 Linux (CentOS 6.8) 3)原理示意图,这里我们画图说明一下 VM 和 CentOS 的关系. ...

  7. hibernate4一对多关联多方多写一次外键导致无法创建java.lang.NullPointerException以及Cannot add or update a child row: a foreign key constraint fails

    一篇文章里边有多张图片,典型的单向一对多关系 多方 当程序运行到这一句的时候必然报错 但是参考书也是这样写的 其中em是 EntityManager em = JPA.createEntityMana ...

  8. springmvc 串口读写 基于win7使用txrx netbeans jdk1.8 maven的

    引入 <dependency> <groupId>org.rxtx</groupId> <artifactId>rxtx</artifactId& ...

  9. Configuring to Debug and Workaround Broken Client Applications

    背景:C3P0数据库连接池占满 Configuring to Debug and Workaround Broken Client Applications http://www.mchange.co ...

  10. 【DM642】ICELL Interface—Cells as Algorithm Containers

    ICELL Interface—Cells as Algorithm Containers: DSP的算法标准(XDAIS)为算法提供了一个标准的接口.这样我们就可以使用第三方的算法.For tech ...