HTML5 svg,JavaScript svg

　　使用脚本可以很方便的完成各种复杂的任务，也是完成动画和交互的一种主流方式。由于挽救(保存的简写)是超文本标记语言的元素，所以支持普通的数字正射影像图操作，又由于挽救(保存的简写)本质上是可扩展标记语言文档，所以也有一种特殊的数字正射影像图操作，大多称之为SVG DOM。当然了，由于目前工业管理学(工业工程)不支持SVG，开发基于工业管理学(工业工程)的挽救(保存的简写)页面需要采用不同的方式。这部分的知识大家其实都很熟悉，下面只是简单的看一下。HTML页面中的DOM操作

　　数字正射影像图大家应该很熟悉了，这里先看一个小例子：复制代码代码如下：

　　头

　　风格

　　#svgContainer {

　　宽度：400像素

　　高度：400像素

　　背景色：# a0a0a0

　　}

　　/风格

　　脚本

　　函数CreateSVG () {

　　var xmlns= http://www。w3。org/2000/SVG ；

　　var boxWidth=300

　　var boxHeight=300

　　var SVG elem=文档。createelementns(xmlns， SVG )；

　　svgElem.setAttributeNS (null， viewBox ， 0 0 框宽框高)；

　　svgElem.setAttributeNS (null， width ，框宽)；

　　svgElem.setAttributeNS (null， height ，框高)；

　　SVG元素。风格。display= block

　　var g=文档。createelementns(xmlns， g )；

　　SVG元素。appendchild(g)；

　　g.setAttributeNS (null， transform ， matrix(1，0，0，-1，0，300))；

　　//绘制线性渐变

　　var defs=文档。createelementns(xmlns， defs )；

　　var grad=文档。createelementns(xmlns，线性渐变)；

　　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 stop top=文档。createelementns(xmlns， stop )；

　　stopTop.setAttributeNS (null， offset ， 0% )；

　　stopTop.setAttributeNS (null， stop-color ， # ff 0000 )；

　　毕业生。appendchild(stop top)；

　　var stop bottom=文档。createelementns(xmlns， stop )；

　　stopBottom.setAttributeNS (null， offset ， 100% )；

　　stopBottom.setAttributeNS (null， stop-color ， # 0000 ff )；

　　毕业生。appendchild(停止底部)；

　　defs。appendchild(grad)；

　　g。appendchild(defs)；

　　//绘制边框

　　var coords=M 0，0 ；

　　coords= l 0，300 ；

　　coords= l 300，0 ；

　　coords= l 0，-300 ；

　　coords= l -300，0 ；

　　var path=文档。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，不透明度,1.0);

　　appendChild(路径);

　　var SVG容器=文档。getelementbyid(“SVG容器”)；

　　SVG容器。appendchild(SVG elem)；

　　}

　　/脚本

　　/头

　　body onload=CreateSVG()

　　div id=svgContainer/div

　　/body

　　发现了没，与普通的超文本标记语言元素的数字正射影像图操作完全一样：

　　选择元素：document.getElementById

　　创建元素：document.createElementNS

　　创建子元素的另外一种方式：element.createChildNS

　　添加元素：node.appendChild

　　设置元素的属性：元素。设置属性/元素。设置属性

　　除了上面这几个操作，下面的操作和属性也很常见：

　　获取元素的属性值：element . getattributes/element . getattribute

　　检查元素是否存在某属性：element.hasAttributeNS

　　移除元素的某属性：element.removeAttributeNS

　　父元素、子元素和兄弟节点：元素。父节点/元素。第一个孩子/孩子。下一个兄弟姐妹

　　这些方法这里不再详细介绍了；此外，DOM树的节点结构，对象之间的继承关系也都是差不多的，就不详述了。需要的同学参看后面的数字正射影像图核心对象的文档。

　　不过，需要注意的是挽救(保存的简写)本质上是可扩展置标语言文档，所以基本采用的数字正射影像图方法都是带纳秒结尾的方式，来提供相关的命名空间；如果创建元素时已经提供了命名空间，而且没有多个命名空间的问题，那么设置相关属性的时候，也可以选择使用不带纳秒的版本，比如直接使用element.setAttribute设置属性值，但是总的来说，还是强烈推荐使用带纳秒结尾的版本，因为这个版本总是工作正常的，即使是在多命名空间的情况下。SVG DOM 这个与标准的数字正射影像图有哪些不同，我也没找到什么全面的资料，目前只知道对属性的赋值方式是不同的。如果有了解这方面的同学还请吱一声啊。

　　上面的例子中，我们使用element.setAttributeNS/element.setAttribute来给属性赋值，在文档对象模型中，可以使用面向对象的方式，通过访问点号来给对象的属性赋值，比如下面是两种方式的对比：

　　普通的数字正射影像图方式：复制代码代码如下：

　　元素。设置属性(" x "，" 10 ")；

　　元素。设置属性(" y "，" 20 ")；

　　element.setAttribute(width ， 100% )；

　　element.setAttribute(height ， 2em )；

　　而文档对象模型的方式：复制代码代码如下：

　　元素。十、基础值。值=10；

　　元素。y .基瓦尔。值=20；

　　元素。宽度。基地瓦尔。新值指定单位(SVG长度.SVG_LENGTHTYPE_PERCENTAGE，100)；

　　元素。身高。基地瓦尔。新值指定单位(SVG长度.SVG_LENGTHTYPE_EMS，10)；

　　数字正射影像图脚本属于传统的脚本，其特征是通过构建"值字符串"来设置各个项。文档对象模型脚本样式的优点是，你不必构建"值字符串",所以性能优于数字正射影像图脚本。嵌入SVG的脚本

　　如果要在挽救(保存的简写)内部添加脚本，就需要使用脚本元素，这个前面已经讲过了，除了这一点，基本上与把脚本放到外面的超文本标记语言中是一样的。看一个例子：复制代码代码如下：

　　！DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。 DTD

　　html xmlns= http://。w3。 org/1999/XHTML

　　头

　　/头

　　身体

　　SVG xmlns= http://www。w3。org/2000/SVG xmlns:xlink= http://www。w3。org/1999/xlink width= 300 height= 300

　　脚本类型=text/ecmascript

　　！[CDATA[

　　函数showRectColor() {

　　警报(文档。getelementbyid( myBlueRect ).getAttributeNS(null， fill ))；

　　}

　　函数showRectArea(evt) {

　　var width=parse float(evt。目标。getattributens(null， width ))；

　　var height=parse float(evt。目标。getattributens(null， height ))；

　　警报(矩形区域为：(宽度*高度));

　　}

　　函数showRootChildrenNr() {

　　alert( Nr of Children:文档。文档元素。子节点。长度’)；

　　}

　　]]

　　/脚本

　　g id=第一组

　　rect id= myBlueRect width= 100 height= 50 x= 40 y= 20 fill= blue onclick= showRectArea(evt)/

　　text x= 40 y= 100 onclick= showRectColor()单击此文本以显示矩形颜色10.10/文

　　text x=40 y=130 单击矩形以显示矩形区域10.10/文

　　text x= 40 y= 160 onclick= showrootchildinnr()单击此文本以显示孩子的数量

　　tspan x=40 dy=20 根元素的元素/tspan/text

　　/svg

　　/body

　　/html在这个例子中，列举了常见的获取DOM对象的方式:

　　1.通过document.getElementById或者document.getElementByClassName之类的方法获取对象；

　　2.通过document.documentElement或者document.rootElement获取文件对象；

　　3.通过事件参数目标事件获取产生事件的对象。这种方式的优点就是不使用编号就可以获取到产生事件的对象。

　　其余的脚本基本和普通的数字正射影像图是一样的。实用参考：

　　脚本索引：http://msdn。微软。com/zh-cn/library/ff 971910(v=vs . 85).文件

　　开发中心：https://开发者。Mozilla。组织/环境/服务

　　热门参考：http://www.chinasvg.com/

　　官方文档：http://www.w3.org/TR/SVG11/

　　数字正射影像图核心对象API:http://参考。站点点。com/JavaScript/Document

　　文档对象模型常用属性和方法http://riso.iteye.com/blog/393459:http://riso . iteye . com/blog/393454

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读