SVG 2D入门12 - SVG DOM

使用脚本可以很方便的完成各种复杂的任务，也是完成动画和交互的一种主流方式。由于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是一样的。

SVG 2D入门12 - SVG DOM的更多相关文章

突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
SVG 2D入门13 - svg对决canvas
到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...
SVG 2D入门1 - SVG综述
位图与矢量图以前,浏览器中显示的图形,例如jpeg.gif等,都是位图,这些图像格式是基于光栅的.在光栅图像中,图像文件定义了图像中每个像素的颜色值.浏览器需要读取这些值并做出相应行动.这种图像的再 ...
SVG Sprite 入门（SVG图标解决方案）
关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...
SVG 2D入门11 - 动画
交互性 SVG拥有良好的用户交互性,例如:1. SVG能响应大部分的DOM2事件.2. SVG能通过cursor良好的捕捉用户鼠标的移动.3. 用户可以很方便的通过设置svg元素的zoomA ...
SVG 2D入门7 - 重用与引用
前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用. 组合 - g元素 g元素是一种容器,它组合一组 ...
SVG 2D入门8 - 文档结构
前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:an ...
SVG 2D入门3 - 文本与图像
SVG中渲染文本 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件.任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行.尽管SVG的文本 ...
SVG 2D入门10 - 滤镜
滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效.这样你就很容易在客户端生成和修改图像了.而且滤镜并没有破坏原有文档的结构,所以维护性也很好. ...

随机推荐

Web_add_header
如果你发现所有的HTTP send请求都缺少头数据包,在脚本中的开头添加web_add_auto_header(”XXXXX“,”yyyy“);随着web_add_auto_header的添加,你不需 ...
zigbee学习之路(八):定时器1(中断)
一.前言通过上次的实验,我们已经学会了定时器3的中断方式,这次,我们来看看定时器1通过中断怎么控制. 二.原理分析定时器1的初始化跟前面提到的一样,也是要配置寄存器T1CTL,还要进行开中断的操作 ...
JSON下
JSON下:目录一:把 JSON 文本转换为 JavaScript 对象二:JSON 实例 - 来自字符串的对象一.把 JSON 文本转换为 JavaScript 对象JSON 最常见的用法之一,是 ...
sqlserver 纵横
纵表转横表 create table Score ( Name ), Class ), score int ) ) ) ) ) ) ) ) select * from Score select t.N ...
Java 中的 static 使用之静态方法
与静态变量一样,我们也可以使用 static 修饰方法,称为静态方法或类方法.其实之前我们一直写的 main 方法就是静态方法.静态方法的使用如: 运行结果: 需要注意: 1. 静态方法中可以直接调用 ...
python走起之第二话
Python基础一.整数(int) 如: 18.73.84 整数类的功能方法及举例: 带__的方法代表有多种表达方式 1.__abs__ <==> abs() 求整数的绝对值:(-11) ...
深入浅出设计模式——适配器模式（Adapter Pattern）
模式动机在软件开发中采用类似于电源适配器的设计和编码技巧被称为适配器模式. 通常情况下,客户端可以通过目标类的接口访问它所提供的服务.有时,现有的类可以满足客户类的功能需要,但是它所提供的接口不一定 ...
Deep Learning 4_深度学习UFLDL教程：PCA in 2D_Exercise（斯坦福大学深度学习教程）
前言本节练习的主要内容:PCA,PCA Whitening以及ZCA Whitening在2D数据上的使用,2D的数据集是45个数据点,每个数据点是2维的.要注意区别比较二维数据与二维图像的不同,特 ...
JQuery_进阶选择器
在简单选择器外,还有一些进阶的选择器方便我们更精准的选择元素. 1.群组选择器可以将相同的样式合并 <script type="text/javascript" src=& ...
CSS样式汇总
1. Overflow: 是否隐藏超出容器范围之外的内容,主要参数包括Hidden(隐藏),Auto(根据容器内容自动显示滚动条),scroll(显示滚动条,即使内容不超出容器范围,也会显示一个边框, ...

SVG 2D入门12 - SVG DOM

SVG 2D入门12 - SVG DOM的更多相关文章

随机推荐

热门专题