SVG教程:内嵌与外部脚本实例及其DOM属性详解
SVG(Scalable Vector Graphics)是一种基于XML的矢量图格式,专为网络和移动设备设计,能够提供高质量的图形保真度且文件大小较小。在这个经典的教材实例中,主要讲解了如何在SVG中有效地利用JavaScript进行脚本操作。 首先,SVG中的脚本有两种类型:内部脚本和外部脚本。内部脚本是将JavaScript代码直接嵌入SVG文档中,通过`<script>`标签实现,例如: ```html <script><![CDATA[ //WirteJavaScriptCode... ]]></script> 这种方式的优点是简洁,但当脚本增多时,维护性和代码结构会受到影响。因此,为了提高代码的组织性,外部脚本被引入,它使用`<script xlink:href="MapControl.js" language="JavaScript">`的形式引用外部JavaScript文件,这样可以将逻辑处理与图形绘制分离,便于团队协作和代码管理。 Adobe SVG Viewer是常用的SVG浏览器,其提供了丰富的DOM(Document Object Model)属性和方法,遵循DOM2标准。在使用SVG DOM时,关键的属性和方法包括: 1. `evt`属性:这是SVG中表示事件的对象,它包含了与当前事件相关的信息。开发者可以通过在`script`中定义响应函数,根据这些信息进行事件处理。尽管它与HTML中的`event`对象类似,但考虑到不同SVG解析器的兼容性问题,某些属性和方法可能只有特定解析器支持。 2. 文档初始化相关方法:SVG文档的初始化过程中,开发者可以利用这些方法来控制文档加载和解析的行为。这涉及到对事件处理、错误处理和文档加载完成后的回调等操作。 3. 兼容性注意事项:由于SVG支持的JavaScript环境可能因浏览器和解析器的不同而异,开发者在使用DOM属性和方法时需要注意兼容性问题。特别是涉及字符串处理,尤其是包含中文字符时,编码格式可能会对代码的执行造成影响,需要确保正确设置编码或使用适当的转码策略。 总结来说,本章节的内容深入介绍了SVG中的脚本编程,包括内部脚本的使用和外部脚本的引入,以及Adobe SVG Viewer提供的DOM特性。同时,还强调了在实际开发中需要考虑的兼容性和编码问题,这对于理解和使用SVG技术以及进行高效维护至关重要。
![](https://csdnimg.cn/release/download_crawler_static/5141409/bgb.jpg)
![](https://csdnimg.cn/release/download_crawler_static/5141409/bgc.jpg)
![](https://csdnimg.cn/release/download_crawler_static/5141409/bgd.jpg)
剩余63页未读,继续阅读
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/b7c24a24032a4b8bb055dbaa9d0a88b4_xiaye1989.jpg!1)
- 粉丝: 0
- 资源: 8
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- AirKiss技术详解:无线传递信息与智能家居连接
- Hibernate主键生成策略详解
- 操作系统实验:位示图法管理磁盘空闲空间
- JSON详解:数据交换的主流格式
- Win7安装Ubuntu双系统详细指南
- FPGA内部结构与工作原理探索
- 信用评分模型解析:WOE、IV与ROC
- 使用LVS+Keepalived构建高可用负载均衡集群
- 微信小程序驱动餐饮与服装业创新转型:便捷管理与低成本优势
- 机器学习入门指南:从基础到进阶
- 解决Win7 IIS配置错误500.22与0x80070032
- SQL-DFS:优化HDFS小文件存储的解决方案
- Hadoop、Hbase、Spark环境部署与主机配置详解
- Kisso:加密会话Cookie实现的单点登录SSO
- OpenCV读取与拼接多幅图像教程
- QT实战:轻松生成与解析JSON数据
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)