《SVG DOM常用属性和方法介绍》由会员分享，可在线阅读，更多相关《SVG DOM常用属性和方法介绍（19页珍藏版）》请在金锄头文库上搜索。
1、SVG DOM常用属性和方法介绍将以Adobe SVG Viewer提供的属性和方法为准，因为不同解析器对JavaScript以及相关 的属性和方法支持的程度不同，有些方法和属性是某个解析器所特有的。SVG支持DOM2 标准。12.2.1 文档初始化相关evt 属性evt表示事件本身，可以通过evt获取与当前事件相关的信息，用户可以在script中定 义响应函数，进行相应的处理。它与普通 JavaScript 脚本中的 event 基本相同，只不过在 普通JavaScript的脚本中简写成“。ownerDocument 属性通过引用该属性获得当前SVG文件的文档对象，也就是得到SVG的DOM结
2、构。使用举例：svgdoc = evt.target.ownerDocumentgetOwnerDocument()方法通过调用该方法获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。使用举例： svgdoc = evt.target.getOwnerDocument()target属性通过引用该属性获得事件产生于哪个SVG元素，有时可能是该元素的父元素。使用举例： object = evt.targetgetTargetO 方法通过调用该方法获得事件产生于哪个SVG元素，有时可能是该元素的父元素。使用举例： object = evt.getTarget()例程 12-1 获得 SV
3、G 文档对象function init(evt)svgDoc = evt.target.ownerDocument; svgRoot = svgDoc.rootElement;alert(svgRoot.nodeName);style=fill:rgb(255,0,0);stroke-width:2/该例展示了如何在SVG文档被载入后，调用初始化程序，以获得SVG的DOM结构， 为后续的编程做好准备。例程12-1中，处表示在SVG文档载入时激活的“onload”事件中执行“init”函数；“init” 函数先是得到SVG Document对象，然后获得该对象的根元素(也就是“SVG”元素)，最
4、 后的效果是弹出一个消息框，上面显示“SVG”。处的代码可以替换为“svgDoc = evt.getTarget().getOwnerDocument;”，得到的效果 是一样的。12.2.2 DOM 对象操作相关前面我们已经介绍过， DOM 对象是一个树型的结构，并且经过载入后就放在内存中供 我们读写。如何对这棵树进行操作，也就成为发挥SVG交互性很关键的一步。下面所示的 方法中，有些是文档对象(Document)的方法，有些是文档元素(Element)的方法，需 要区别开来。 DOM 可以分为三大部分：文档基本元素、文档对象和各种类型的从文档基本 元素派生出的文档元素。文档对象是文档对象模型
5、的顶级对象，它包含了整个文档的内容。 各种类型的文档元素派生自文档基本元素类型，用于描述文档中各种实际存在的元素。其中 可以定义一种文档元素，它们可以容纳其他的文档元素，这些元素就是容器元素，实际上文 档对象就是最大的容器元素。由于文档对象模型中存在容器元素，因此所有的对象都组成一 个树状结构，称为文档对象树或者DOM树，其中根节点就是文档对象。reggetElementByld(ID_Name)方法通过元素的 ID 名获得该元素。使用举例：object = svgdoc.getElementByld(map)getElementsByTagName(Tag_Name)方法通过元素名获得一个或
6、者一组元素，注意方法名中的1Eleme nts”是复数，说明返回的元 素可能有多个，是一个“NodeList”。使用举例： object = svgdoc.getElementsByTagName (rect)例程12-2获得SVG文档中的元素function init(evt)svgDoc = evt.target.ownerDocument;svgRoot = svgDoc.rootElement;rect = svgRoot.getElementByld(rect1); rects = svgRoot.getElementsByTagName(rect); alert(rect+,+re
7、cts);style=fill:rgb(255,0,0)/style=fill:rgb(255,0,0)/style=fill:rgb(255,0,0)/打开该文档后，弹出的消息框上显示object SVGRectEleme nt,object NodeList。例程12-2中，处使用“recti”的ID名得到了 “svgRoot”下属的一个矩形元素 (SVGRectElement)。是为了获得所有svgRoot下属的”元素，返回的是一个 NodeList，本例中一共有三个符合条件的元素。getAttribute(ID_Name)方法根据所提供的 ID 名来获得元素的属性值。使用举例：colo
8、r = node.getAttribute (fill)setAttribute(Attribute_Name,Value)方法设置该元素属性名为“ Attribute_Name的，属性的值为“Value”。使用举例： color = node.getAttribute (fill)setAttributeNS(NameSpace, Attribute_Name ,Value)方法功能效果同 setAttribute 方法， 区别就是增加了为属性名加上命名空间 (NameSpace)。在ASV3.0中，属性名都是默认SVG的命名空间，所以不需要再特别注 明，但是如果你要使用“xli nk”中的
9、属性，就要加入相应的命名空间“http:/www.w3.org/2000 /xlink/namespace/”。使 用 举 例 ： object = svgdoc.setAttributeNS (http:/www.w3.org/2000/xlink/namespace/, xlink:href, index.html)注意 绝对不要在同一个程序中混合使用DOM1非名称空间API和DOM2名称空间感 知的API (例如，createElement和createElementNS)。如果使用名称空间，请尽量在根 元素位置声明所有名称空间，并且不要覆盖名称空间前缀，否则情况会非常混乱。一般来说，
10、只要按照惯例，就不会触发使你陷入麻烦的临界情况。例程12-3设置SVG元素的属性function init(evt)svgDoc = evt.target.ownerDocument;svgRoot = svgDoc.rootElement;rect1 = svgRoot.getElementById(rect1);rect2 = svgRoot.getElementById(rect2);function setSvgAttribute(evt,flag)if ( flag = 1)rect1.setAttribute(fill, green); elserect2.setAttribute
11、NS(null, fill, green); function getSvgAttribute(evt)alert(rect1.getAttribute(fill)+ , + rect1.getAttribute(height); onclick=getSvgAttribute(evt) onmousemove=setSvgAttribute(evt,1) style=fill:rgb(255,0,0)/onclick=setSvgAttribute(evt,2) style=fill:rgb(255,0,0)/这里例子中我们接触到了 SVG中的事件，这跟HTML中的事件很相似，关于SVG的
12、事件我们会在后面的章节中做详细介绍。这里用到了两个事件：一个是鼠标单击事件 on click”，一个是鼠标移动到时触发的on mousemove”事件，注意它们的大小写，全部 是小写，否则事件无法激活，浏览器会报告脚本错误。我们想要实现的效果是，单击ID为“recti”的矩形时，能得到它的填充颜色值和矩形的 高度值，并且鼠标移动到该矩形的时候，矩形的填充颜色从红色变成绿色；另外一个矩形 我们在单击它的时候，它的填充颜色从红色变成绿色。例程12-3中，处设置矩形“recti”的“fill”属性为green”；。通过命名空间来设置属性值。不过命名空间参数的值是null”，因为ASV3.0已经内 置
13、了命名空间，所以你再给这些SVG的属性添加命名空间的话就会出错，所以填入null” 值。是为了弹出消息框，显示我们需要知道的那两个属性值。createElement(Element_Type)方法在 DOM 对象内创建一个新的元素，可以指定创建哪一种类型的元素，并且返回对这个 新元素的引用。使用举例：newnode = svgdoc.createElement (rect)appendChild(Element)方法 在该元素的最后追加一个孩子节点。使用举例： someElement.appendChild(node)例程12-4动态创建SVG的元素function alertMsg(evt)
14、objet=evt.target;large=objet.getAttribute(width); alert(Width of the rectangle is: + evt.target.getAttribute (width);function init(evt) svgdoc=evt.target.ownerDocument;node=svgdoc.createElement(rect); node.setAttribute(x,50);node.setAttribute(y,50); node.setAttribute(width,100); node.setAttribute(he
15、ight,50);node.setAttribute(style,fill:red); node.addEventListener(mousemove,alertMsg,false); group=svgdoc.getElementById(group);group.appendChild(node); Click the rectangle在上面这个SVG文档中，没有看到对rect”元素的定义，但是实际显示的时候还是显示 了一个红色的矩形，原因就在于例程12-4中处，我们使用createElement”方法动态生成 了一个矩形元素，并且逐个设置了它的“X”、“y”、“width”、“height”及“fill”属性，并且在处 为该元素添加了 “mousemove”事件及事件相应的函数名。但是这样生成的矩形元素依旧还 是“流离失所”，无法显示出来，需要使用 appendChild、 insertBefor
