zoukankan      html  css  js  c++  java
  • SVG实战开发学习(十一)——svg动态交互脚本

    【在svg中使用JavaScript脚本】

    1、内部脚本

    JavaScript脚本在svg中分为内部脚本和外部脚本两种,内部和外部只是引用方式的区别,对程序的编写不造成影响。首先介绍一下内部脚本,它是如下形式嵌入到svg文档中的。

    <script><![CDATA[

    //write JavaScript code…

    ]]>

    SVG采用<script>标签,与将JavaScript脚本加入HTML页面的<script>标签相似,但又不尽相同。这种内嵌代码,必须使用CDATA节,CDATA为XmlNodeType的一个枚举值,被称为CDATA节。CDATA节用于转义那些会被识别为XML标记的文本块,CDATA节点不能有任何子节点。

    这种内部脚本使用起来很方便,但是一旦JavaScript脚本数量很庞大时,就会与svg的图形代码混合在一起,不易维护,所以svg有了外部脚本这种引用方式。

    2、外部脚本的

    引用形式:

    <script xlink:href="MapControl.js" language="JavaScript">

    上面引用的是一个JS脚本文件,里面都是JavaScript脚本代码,此处使用了"xlink"的链接方式,而不是啊HTML中的"src",这个例子是js脚步文件与svg文件在同一个目录中,如果在不同的目录中,请设置好"xlink:href"属性,外部脚本方式使得负责逻辑的JavaScript脚本与负责图形生成与显示的svg代码分离开来,增强了代码的可维护性。

    【SVG DOM常用属性和方法】

    将以Adobe svg viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的,svg支持DOM2标准。

    1、文档初始化相关

    a)evt属性

    evt 表示事件本身,可以通过evt获取与当前事件相关的信息,用户可以在script中定义响应函数,进行相应的处理。它与普通的JavaScript脚本中的event基本相同,只不过在普通JavaScript的脚本中简写成"e".

    b)ownerDocument属性

    通过引用该属性获得当前svg文件的文档对象,也就是得到svg的DOM结构。使用举例:svgdoc=evt.target.ownerDocument.

    c)getOwnerDocument()方法

    通过调用该方法获得当前svg文件的文档对象,也就是得到svg的DOM结构。使用举例:svgdoc=evt.target.getOwnerDocument();

    d)target属性

    通过引用该属性获得事件产生于哪个svg元素,有可能是该元素的父元素。使用举例:object=evt.target

    e)

  • 相关阅读:
    org.mybatis.spring.mapper.MapperScannerConfigurer$Scanner$1
    LayoutInflater
    发现javax.xml.parsers.SAXParser有bug
    startActivityForResult and onActivityResult
    Sub Thread to update main Thread (UI) 2
    Sub Thread to update main Thread (UI)
    打算听的歌
    会话状态Session
    HttpResponse类
    HttpRequest类
  • 原文地址:https://www.cnblogs.com/cacti/p/4755435.html
Copyright © 2011-2022 走看看