使用的是 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. OpenJudge/Poj 1159 Palindrome

    1.链接地址: http://bailian.openjudge.cn/practice/1159/ http://poj.org/problem?id=1159 2.题目: Palindrome T ...

  2. OpenJudge/Poj 1004 Financial Management

    1.链接地址: http://poj.org/problem?id=1004 http://bailian.openjudge.cn/practice/1004 2.题目: 总时间限制: 1000ms ...

  3. JavaScript 作用域和作用域链

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...

  4. winfrom 多语言切换

    1.首先将窗体的“Localizable”属性置为“True”,然后将“Language”属性置为自己想要的语言,点击重新生成项目 例如:置为“中文”,以及“英文”.当每次置为不同的语言并重新生成项目 ...

  5. 几个css的小知识点(一)

    1.对于不能确定宽度的div让它水平居中. <div class='father'> <div class='son'>居中</div> </div> ...

  6. MySQL中SQL语句的分类

    1:数据定义语言(DDL) :创建和删除数据库(CREATE DATABASE || DROP  DATABASE):2:创建.修改.重命名.删除表(CREATE  TABLE || ALTER TA ...

  7. 用php生成word文档

    一.用windows里面自带的com,然后用php生成word文档 <?php $word= new COM("word.application") or die(" ...

  8. jexus 启动失败 原因定位

    现象: root@test:/usr/jexus/siteconf# /usr/jexus/jws restartRestarting ... Failure 定位步骤: 1.查看/usr/jexus ...

  9. 【Http】Http权威指南

    God Is Coder 2012-10-17 22:25 阅读:77 评论:0   <http权威指南>阅读笔记(十二) God Is Coder 2012-10-17 22:04 阅读 ...

  10. Razor语法小记

    1.代码块中,<text>标签用来输出,如: @{ <text>sdfsdf</text> } 输出Html: sdfsdf