使用的是 createElement 方法 这个是无法生成SVG DOM的

可以使用下方的方法生成

  1. var svgns = "http://www.w3.org/2000/svg";
  2. $.svg = function $svg(tagName) {
  3. return $(document.createElementNS(svgns, tagName));
  4. };

判断一个dom元素是否是svg dom的方法

  1. function isSVG(el) {
  2. return el && el.nodeType === 1 && (el instanceof window.SVGElement)
  3. }

上次采用SVG来做按钮来适应动态改变颜色需求,但是需要用JS自动隐藏和显示。发现用jQuery的addClass("hide")方式无法写进去。我猜测是因为SVG不属于HTML常规DOM元素才会无效果,之后我在SVG上包了一个DIV后解决了这个问题。

其实还有一种可以用原生JS去添加class如下。

document.getElementById("svg").setAttribute("class","hide");

jquery 创建 SVG DOM 的处理方法的更多相关文章

  1. jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  2. 了解jQuery并掌握jQuery对象和DOM对象的区别

    jQuery的优势: 开源--开放源代码 轻量级 强大的选择器 出色的DOM操作(对DOM元素的一个增删改查) 完善的Ajax,出色的浏览器兼容性,丰富的插件支持,完善的文档(说明书) 链式操作方式, ...

  3. jQuery创建DOM的方法

    jQuery1.4带来了一个全新的便捷地清晰的DOM对象创建方法,在 jQuery 1.4中,我们可以传递一个对象作为第二个参数. 这个参数接受一个属性的集合,这些可以传递给.attr() 方法.此外 ...

  4. SVG DOM常用属性和方法介绍

    将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2 ...

  5. jQuery基础之(四)jQuery创建DOM元素

    利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery ...

  6. jQuery基础(DOM篇,append(),after(),prepend(),insertAfter(),节点删除,遍历方法each())

    1.DOM创建节点及节点属性   创建流程比较简单,大体如下:   - 创建节点(常见的:元素.属性和文本) - 添加节点的一些属性 - 加入到文档中   流程中涉及的一点方法:   - 创建元素:d ...

  7. SVG DOM常用属性和方法介绍(1)

    12.2  SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...

  8. js和jQuery创建元素和把元素插入到文档中所用的方法

    js创建元素: document.createElement(" 创建的元素");   //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...

  9. jquery对象与dom对象之间互相转换的方法

    本文主要讲述jquery对象和js里的dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法,或js里的dom对象使用jquery里的方法. jquery对象和dom对象是不一样的, ...

随机推荐

  1. JS函数的参数对象arguments在严格模式下的限制

    在JS中,传入的函数的参数个数可以与定义函数的个数不一致,那么对于传入的实参的引用,则是arguments对象.然而改对象在严格模式和非严格模式下是由区分的: 1 在严格模式下arguments作为了 ...

  2. Linux中的sed

    sed [选项] [动作] 文件 选项:     -n :静默模式.使用-n则只有经过sed处理的那一行.     -e :允许多重编辑:       -f :结果默认输出到终端,使用-f会将结果写在 ...

  3. hdu 5094 Maze 状态压缩dp+广搜

    作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4092176.html 题目链接:hdu 5094 Maze 状态压缩dp+广搜 使用广度优先 ...

  4. 51nod贪心算法入门-----独木舟问题

    独木舟问题 n个人,已知每个人体重,独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? 分析:按照 ...

  5. 洛谷 P1052 过河

    题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...

  6. mongodb 简单部署方案及实例

    mongodb 简单部署方案及实例 转载:http://my.oschina.net/zhuzhu0129/blog/53290 第一节 准备工作 一 安装mongodb  我这里选用rehl 5.6 ...

  7. new 的用法

     在C#中,new关键字有三种用法: 1.new 运算符,用于创建对象和调用构造函数. 2.new  修饰符,在用作修饰符时,new关键字可以显式隐藏从基类继承的成员. 3.new 约束 ,用于在泛型 ...

  8. 一个字 word 是16位, 一个字由两个字节组成 , 字节=byte ,一个字节8位, 位=bit 如果没有特殊说明kb 就是指 k*bit

    一个字 word 是16位, 一个字由两个字节组成 , 字节=byte,,一个字节8位, 位=bit 如果没有特殊说明kb 就是指 k*bit kbyte= k*byte

  9. 157. Read N Characters Given Read4

    题目: The API: int read4(char *buf) reads 4 characters at a time from a file. The return value is the ...

  10. 关于fastclick.js

    Fastclick fastclick.js解决了什么问题? 自己接触WebApp开发的前期, 总感觉WebApp上的按键操作不如NativeApp的灵敏, 好像有那么一小点延迟. 后来才知道, 这是 ...