HTML5之SVG 2D入门12 - SVG DOM

转载 2016年08月31日 10:32:48

使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式。由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为SVG DOM。当然了,由于目前IE不支持SVG,开发基于IE的SVG页面需要采用不同的方式。这部分的知识大家其实都很熟悉,下面只是简单的看一下。

HTML页面中的DOM操作
DOM大家应该很熟悉了,这里先看一个小例子:

<head>     
<style>         
 #svgContainer {             
  width: 400px;             
  height: 400px;             
  background-color: #a0a0a0;         
 }     
</style>     
<script>         
 function CreateSVG () {             
  var xmlns = "http://www.w3.org/2000/svg";             
  var boxWidth = 300;             
  var boxHeight = 300;              
  var svgElem = document.createElementNS (xmlns, "svg");             
  svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);             
  svgElem.setAttributeNS (null, "width", boxWidth);             
  svgElem.setAttributeNS (null, "height", boxHeight);             
  svgElem.style.display = "block";              
  var g = document.createElementNS (xmlns, "g");             
  svgElem.appendChild (g);             
  g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');                  
  // draw linear gradient             
  var defs = document.createElementNS (xmlns, "defs");             
  var grad = document.createElementNS (xmlns, "linearGradient");             
  grad.setAttributeNS (null, "id", "gradient");             
  grad.setAttributeNS (null, "x1", "0%");             
  grad.setAttributeNS (null, "x2", "0%");             
  grad.setAttributeNS (null, "y1", "100%");             
  grad.setAttributeNS (null, "y2", "0%");             
  var stopTop = document.createElementNS (xmlns, "stop");             
  stopTop.setAttributeNS (null, "offset", "0%");             
  stopTop.setAttributeNS (null, "stop-color", "#ff0000");             
  grad.appendChild (stopTop);             
  var stopBottom = document.createElementNS (xmlns, "stop");             
  stopBottom.setAttributeNS (null, "offset", "100%");             
  stopBottom.setAttributeNS (null, "stop-color", "#0000ff");             
  grad.appendChild (stopBottom);             
  defs.appendChild (grad);             
  g.appendChild (defs);                  
  // draw borders             
  var coords = "M 0, 0";             
  coords += " l 0, 300";             
  coords += " l 300, 0";             
  coords += " l 0, -300";             
  coords += " l -300, 0";              
  var path = document.createElementNS (xmlns, "path");             
  path.setAttributeNS (null, 'stroke', "#000000");             
  path.setAttributeNS (null, 'stroke-width', 10);             
  path.setAttributeNS (null, 'stroke-linejoin', "round");             
  path.setAttributeNS (null, 'd', coords);             
  path.setAttributeNS (null, 'fill', "url(#gradient)");             
  path.setAttributeNS (null, 'opacity', 1.0);             
  g.appendChild (path);              
  var svgContainer = document.getElementById ("svgContainer");             
  svgContainer.appendChild (svgElem);                  
 }      
</script> 
</head> 
<body onload="CreateSVG ()"> 
    <div id="svgContainer"></div> 
</body>

发现了没,与普通的html元素的DOM操作完全一样:
选择元素:document.getElementById
创建元素:document.createElementNS
创建子元素的另外一种方式:element.createChildNS
添加元素:node.appendChild
设置元素的属性:element.setAttributeNS/element.setAttribute
除了上面这几个操作,下面的操作和属性也很常见:
获取元素的属性值: element.getAttributeNS/element.getAttribute
检查元素是否存在某属性:element.hasAttributeNS
移除元素的某属性:element.removeAttributeNS
父元素、子元素和兄弟节点:element.parentNode/element.firstChild/child.nextSibling
这些方法这里不再详细介绍了;此外,DOM树的节点结构,对象之间的继承关系也都是差不多的,就不详述了。需要的同学参看后面的DOM Core Object的文档。

不过,需要注意的是SVG本质上是XML文档,所以基本采用的DOM方法都是带NS结尾的方式,来提供相关的namespace;如果创建元素时已经提供了namespace,而且没有多个namespace的问题,那么设置相关属性的时候,也可以选择使用不带NS的版本,比如直接使用element.setAttribute设置属性值,但是总的来说,还是强烈推荐使用带NS结尾的版本,因为这个版本总是工作正常的,即使是在多namespace的情况下。

SVG DOM
这个与标准的DOM有哪些不同,我也没找到什么全面的资料,目前只知道对属性的赋值方式是不同的。如果有了解这方面的同学还请吱一声啊。
上面的例子中,我们使用element.setAttributeNS/element.setAttribute来给属性赋值,在SVG DOM中,可以使用面向对象的方式,通过访问点号来给对象的属性赋值,比如下面是两种方式的对比:
普通的DOM方式:

element.setAttribute("x", "10");
element.setAttribute("y", "20");
element.setAttribute("width", "100%");
element.setAttribute("height", "2em");

而SVG DOM的方式:

element.x.baseVal.value = 10;
element.y.baseVal.value = 20;
element.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);
element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10); 

DOM脚本属于传统的脚本,其特征是通过构建“值字符串”来设置各个项。SVG DOM脚本样式的优点是,你不必构建“值字符串”,所以性能优于DOM脚本。

嵌入SVG的脚本
如果要在SVG内部添加脚本,就需要使用script元素,这个前面已经讲过了,除了这一点,基本上与把脚本放到外面的HTML中是一样的。看一个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head>     
</head> 
<body> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <script type="text/ecmascript">
    <![CDATA[
      function showRectColor() {
        alert(document.getElementById("myBlueRect").getAttributeNS(null,"fill"));
      }

      function showRectArea(evt) {
        var width = parseFloat(evt.target.getAttributeNS(null,"width"));
        var height = parseFloat(evt.target.getAttributeNS(null,"height"));
        alert("The rectangle area is: " + (width * height));
      }

      function showRootChildrenNr() {
        alert("Nr of Children: "+document.documentElement.childNodes.length);
      }
    ]]>
  </script>
  <g id="firstGroup">
    <rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" onclick="showRectArea(evt)"/>
    <text x="40" y="100" onclick="showRectColor()">Click on this text to show rectangle color.</text>
    <text x="40" y="130">Click on rectangle to show rectangle area.</text>
    <text x="40" y="160" onclick="showRootChildrenNr()">Click on this text to show the number of child
     <tspan x="40" dy="20">elements of the root element.</tspan></text>
  </g>
</svg>
</body> 
</html>

在这个例子中,列举了常见的获取DOM对象的方式:
1. 通过document.getElementById或者document.getElementByClassName之类的方法获取对象;
2. 通过document.documentElement或者document.rootElement获取document对象;
3. 通过事件参数evt.target获取产生事件的对象。这种方式的优点就是不使用id就可以获取到产生事件的对象。

  其余的脚本基本和普通的DOM是一样的。

实用参考:
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/
官方文档:http://www.w3.org/TR/SVG11/
DOM Core Object API:http://reference.sitepoint.com/javascript/Document
SVG DOM常用属性和方法:http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459

转自:http://www.cnblogs.com/dxy1982/archive/2012/07/20/2417379.html

相关文章推荐

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

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

基本 SVG 动画

本主题将介绍基本 SVG 动画,它是学习中级 SVG 动画之前必须掌握的内容。此主题假定你基本了解 HTML 和 JavaScript。若要完全理解此主题所述的内容,请计划花 1 小时左右的时间来学习...

SVG基础以及使用Javascript DOM操作SVG

简介在HTML中使用SVG " style="">分组元素 解决text文本排版问题 通过Javascript DOM控制SVG 设置文本获取元素高宽和坐标事件处理自定义的z-...

HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果,喜欢特效的朋友可不要错过哦。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧,希望本文对你有所帮助。 ...

HTML5之SVG 2D入门11 - 动画

交互性 SVG拥有良好的用户交互性,例如: SVG能响应大部分的DOM2事件。 SVG能通过cursor良好的捕捉用户鼠标的移动。 用户可以很方便的通过设置svg元素的zoomAndPan属性的值...

HTML5之SVG 2D入门6 - 坐标与变换

坐标系统   SVG存在两套坐标系统:视窗坐标系与用户坐标系。默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下;如下图所示: SVG的视窗位置...

HTML5之SVG 2D入门8—文档结构及相关元素总结

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里主要是对SVG的文档结构中剩下的相关元素简单总结一下,感兴趣的朋友可不要错过哦,然后继续向前领略SVG的其他特性。 前面介绍了很多的基本元...

HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用

SVG拥有良好的用户交互性:SVG能响应大部分的DOM2事件,SVG能通过cursor良好的捕捉用户鼠标的移动等等,感兴趣的朋友可以了解下啊,或许本文对你学习动画有所帮助。 交互性  SVG拥有良...

HTML5之SVG 2D入门10—滤镜的定义及使用

滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效,喜欢特效的朋友可千万不要错过啊。希望本对你有所帮助。 滤镜称得上是SVG最强大的功能了...

HTML5之SVG 2D入门4—笔画与填充

颜色处理,也就是填充和边框效果;你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中,也可以以CSS的形式保存,这是与canvas不一样的地方。 前面我们重点...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5之SVG 2D入门12 - SVG DOM
举报原因:
原因补充:

(最多只允许输入30个字)