logo资料库

svg与js交互.pdf

发布时间：2022-06-15 发布人：admin 分类：说明书 资料大小：0.77M 资料格式：pdf 举报 版权申诉
第1页 / 共46页
第2页 / 共46页
第3页 / 共46页
第4页 / 共46页
第5页 / 共46页
第6页 / 共46页
第7页 / 共46页
第8页 / 共46页
资料共46页，剩余部分请下载后查看
    之前展示的 SVG都缺乏交互性， 只展示了它矢量图的 “功力”，从本章开始， 我们将进入 SVG开发的核心章节， 在脚本的帮助下， SVG将发挥出它更大的潜能。 12.1 在 SVG 中使用 JavaScript 脚本 JavaScript 脚本在 SVG中分为内部脚本和外部脚本两种， 内部和外部只是引 用方式的区别， 对程序的编写不造成影响。 首先介绍一下内部脚本， 它是以如下 形式嵌入到 SVG文档中的： SVG采用 该例展示了如何在 SVG文档被载入后，调用初始化程序，以获得 SVG的 DOM 结构，为后续的编程做好准备。 例程 12-1 中，u 处表示在 SVG文档载入时激活的“ onload ”事件中执行“i nit ”函数；“init ”函数先是得到 SVG Document对象，然后获得该对象的根元 素（也就是“ SVG”元素），最后的效果是弹出一个消息框，上面显示“ SVG”。 v 处的代码可以替换为 “svgDoc = evt.getTarget().getOwnerDocument; ”， 得到的效果是一样的。 12.2.2 DOM 对象操作相关 前面我们已经介绍过， DOM对象是一个树型的结构，并且经过载入后就放在 内存中供我们读写。 如何对这棵树进行操作， 也就成为发挥 SVG交互性很关键的 一步。下面所示的方法中，有些是文档对象（ Document）的方法，有些是文档元 素（Element）的方法，需要区别开来。 DOM可以分为三大部分：文档基本元素、 文档对象和各种类型的从文档基本元素派生出的文档元素。 文档对象是文档对象
    模型的顶级对象， 它包含了整个文档的内容。 各种类型的文档元素派生自文档基 本元素类型，用于描述文档中各种实际存在的元素。 其中可以定义一种文档元素， 它们可以容纳其他的文档元素， 这些元素就是容器元素， 实际上文档对象就是最 大的容器元素。 由于文档对象模型中存在容器元素， 因此所有的对象都组成一个 树状结构，称为文档对象树或者 DOM树，其中根节点就是文档对象。 — getElementById(ID_Name) 方法 通过元素的 ID 名获得该元素。 使用举例： object = svgdoc.getElementById("map") — getElementsByTagName(Tag_Name)方法 通过元素名获得一个或者一组元素，注意方法名中的“ Elements”是复 数，说明返回的元素可能有多个，是一个“ NodeList ”。 使用举例： object = svgdoc.getElementsByTagName ("rect") 例程 12-2 获得 SVG 文档中的元素 fill="red"/> fill="red"/> 打开该文档后，弹出的消息框上显示“ [object SVGRectElement],[object NodeList] ”。
    例程 12-2 中， u 处使用“ rect1 ”的 ID 名得到了“ svgRoot”下属的一个矩 形元素（ SVGRectElement）。v 是为了获得所有“ svgRoot”下属的“ ” 元素，返回的是一个“ NodeList ”，本例中一共有三个符合条件的元素。 — getAttribute(ID_Name) 方法 根据所提供的 ID 名来获得元素的属性值。 使用举例： color = node.getAttribute ("fill") — setAttribute(Attribute_Name,Value) 方法 设置该元素属性名为“ Attribute_Name ”，属性的值为“ Value”。 使用举例： color = node.getAttribute ("fill") — setAttributeNS(NameSpace, Attribute_Name ,Value) 方法 功能效果同 setAttribute 方法，区别就是增加了为属性名加上命名空 间（NameSpace）。在 ASV3.0中，属性名都是默认 SVG的命名空间，所 以不需要再特别注明，但是如果你要使用“ xlink ”中的属性，就要加 入相应的命名空间“ 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 ）。如果使用名称 空间，请尽量在根元素位置声明所有名称空间， 并且不要覆盖名称空间前缀， 否 则情况会非常混乱。 一般来说， 只要按照惯例， 就不会触发使你陷入麻烦的临界 情况。 例程 12-3 设置 SVG 元素的属性 id="rect1" x="100" y="100" width="100" height="50" fill="red" on onmousemove="setSvgAttribute(evt,1) "/> 例子中我们接触到了 SVG中的事件，这跟 HTML中的事件很相似，关于 SVG 的事件我们会在后面的章节中做详细介绍。 这里用到了两个事件： 一个是鼠标单 击事件“ onclick ”，一个是鼠标移动到“ ”时触发的“ onmousemove”事 件，注意它们全部是小写，否则事件无法激活，浏览器会报告脚本错误。 我们想要实现的效果是，单击 ID 为“rect1 ”的矩形时，能得到它的填充颜 色值和矩形的高度值， 并且鼠标移动到该矩形的时候， 矩形的填充颜色从红色变 成绿色；另外一个矩形，我们在单击它的时候，它的填充颜色从红色变成绿色。 例程 12-3 中， u 处设置矩形“ rect1 ”的“ fill ”属性为“ green”。 v 通过命名空间来设置属性值。不过命名空间参数的值是“ null ”，因为 AS V3.0 已经内置了命名空间，所以你再给这些 SVG的属性添加命名空间的话就会 出错，所以填入“ null ”值。 w是为了弹出消息框，显示我们需要知道的那两个属性值。 — createElement(Element_Type) 方法 在 DOM对象内创建一个新的元素，可以指定创建哪一种类型的元素，并且返 回对这个新元素的引用。
    使用举例： newnode = svgdoc.createElement （"rect" ） — appendChild(Element) 方法 在该元素的最后追加一个孩子节点。 使用举例： someElement.appendChild （node） 例程 12-4 动态创建 SVG 的元素
    Click the rectangle 在上面这个 SVG文档中，没有看到对“ rect ”元素的定义，但是实际显示的 时候还是显示了一个红色的矩形，原因就在于例程 12-4 中 u 处，我们使用“ cr eateElement ”方法动态生成了一个矩形元素， 并且逐个设置了它的 “x”、“y”、 “width ”、“ height ”及“ fill ”属性，并且在 v 处为该元素添加了“ mousem ove”事件及事件相应的函数名。 但是这样生成的矩形元素依旧还是 “流离失所”， 无法显示出来， 需要使用 appendChild 、insertBefore 、replaceChild 等方法把 生成的节点元素添加到其他元素下才能显示。 所以，执行 w处的语句后， 生成的 新元素被加入到名为“ group”的组中去，从而显示出来。最终的 DOM结构如图 12-1 所示。 图 12-1 动态生成 SVG 元素后的 DOM 结构 从图 12-1 中可以看出， 新加入的“rect ”元素与之前 就存在的“text ”元素位置并 列。 — replaceChild(newElement, oldElement) 方法 在某元素的子节点中，使用新元素替代旧元素。 使用举例： someElement.replaceChild （newNode, oldNode） 例程 12-5 replaceChild 方法使用举例