需要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. pyQT Dialog默认选中某一个选项问题的解决

    方法一: 在新建ui文件时不要新建Dialog # -*- coding: utf-8 -*- # Form implementation generated from reading ui file ...

  2. linux mysql备份shell

    #!/bin/bash # Shell script to backup MySql database # Author: Henry he # Last updated: -- # crontab ...

  3. 给自己立下一个flag先

    恩,今天开始写博客. 其实主要原因是被人甩了,想找个事情让自己忙起来. 主要原因是“男人没钱就是无能”,我是个应届毕业生.所以你懂的. 我不喜欢让心情不爽,所以只能找事情让自己忙起来.所以我开始立Fl ...

  4. Spring注解驱动(上)

    记录常用的spring注解 1.@Configuration 和 @Bean spring中可以使用xml 的方式进行配置, 也可以使用 @ Configuration 来指定一个类为配置类, 并使用 ...

  5. DOS常用命令详解

    DOS常用命令详解 dir 列文件名 deltree 删除目录树 cls 清屏 cd 改变当前目录 copy 拷贝文件 diskcopy 复制磁盘 del 删除文件 format 格式化磁盘 edit ...

  6. CAS添加验证码功能

    1.  cas.war 下面的web-inf/web.xml  lib添加  kaptcha.jar kaptcha.jar通过maven获取 <dependency> <group ...

  7. Leetcode950. Reveal Cards In Increasing Order按递增顺序显示卡牌

    牌组中的每张卡牌都对应有一个唯一的整数.你可以按你想要的顺序对这套卡片进行排序. 最初,这些卡牌在牌组里是正面朝下的(即,未显示状态). 现在,重复执行以下步骤,直到显示所有卡牌为止: 从牌组顶部抽一 ...

  8. Autoware显示用户界面细节

    https://blog.csdn.net/jianxuezixuan/article/details/86015224

  9. IOS开发之基础oc语法

    类 1.类的定义: 类=属性+方法: -属性代表类的特征 -方法是类能对变化做出的反应 类定义的格式:类的声明和类的实现组成 -接口(类的声明):@interface 类名:基类的名字 .类名首字母要 ...

  10. python 运行python -m pip list 出现错误

    1.出现如下错误提示 2解决方案 解决方法:(windows)在C:\Users{用户名}\ 目录下创建名称为pip的文件夹,里面创建文本文件,内容为 [list] format=columns 保存 ...