一、在HTMl中访问SVG的DOM

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

 <script language="javascript">

window.onload = function(){

    //获得SVG文档的DOM结构

     var svgdoc = document.getElementById("id1").getSVGDocument();

}

 </script>

 </head>

 <body>

 <!-- 插入SVG文档 -->

 <embed id="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" src="a.svg" height="200px" width="400px" type="image/svg+xml">

</body>

</html>

二、在SVG文档中嵌入JavaScript

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<svg xmlns="http://www.w3.org/2000/svg"

width="3.5in" height="1in">

<title>Listing 24-1 from the XML Bible</title>

<script type="text/javascript">

<![CDATA[

alert(123);

]]>

</script>

<circle r="30" cx="34" cy="34"

style="fill: red; stroke: blue; stroke-width: 2" />

</svg>

三、在SVG文档中链接外部JavaScript

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

width="3.5in" height="1in">

<title>Listing 24-1 from the XML Bible</title>

<circle id="x" r="30" cx="34" cy="34"

style="fill: red; stroke: blue; stroke-width: 2" />

<script type="text/javascript" xlink:href="a.js">

</script>

</svg>

注意的是需要添加命名空间xmlns:xlink="http://www.w3.org/1999/xlink"，不然解析script节点的xlink:href="a.js"属性会报错

程序员的基础教程：菜鸟程序员

SVG与HTML、JavaScript的三种调用方式的更多相关文章

  1. 【转】SVG与HTML、JavaScript的三种调用方式

    原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...

  2. Vue组件的三种调用方式

    最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...

  3. java三种调用方式（同步调用/回调/异步调用）

    1:同步调用:一种阻塞式调用,调用方要等待对方执行完毕才返回,它是一种单向调用 2:回调:一种双向调用模式,也就是说,被调用方在接口被调用时也会调用对方的接口: 3:异步调用:一种类似消息或事件的机制 ...

  4. WebService学习整理（一）——客户端三种调用方式整理

    1 WebService基础 1.1 作用 1,       WebService是两个系统的远程调用,使两个系统进行数据交互,如应用: 天气预报服务.银行ATM取款.使用邮箱账号登录各网站等. 2, ...

  5. hive三种调用方式

    一.hive -e ‘sql语句’ (shell命令) 适合比较短的sql语句调用,优点是可以直接在shell中调用静音模式 -S 在执行HiveQL过程中,不在显示器输出MR的执行过程hive -S ...

  6. 委托（delegate）的三种调用方式：同步调用，异步调用，异步回调（转载）

    下面为即将被调用的方法: public delegate int AddHandler(int a,int b); public class 加法类 { public static int Add(i ...

  7. javaScript的三种储存方式

    (一).SessionStorage     会话储存 (二).localStorage           本地储存 (三).Cookier                   现实中为:饼干    ...

  8. JavaScript 继承——三种继承方法及其优劣

    原文地址   本文内容 目的 继承的第一步--最简单的继承 私有变量/成员和原型 三种继承方式及其优劣 基本的原型继承 Yahoo JavaScript 模块模式 创建闭包的构造函数 三种方法的代码执 ...

  9. JavaScript 闭包的详细分享（三种创建方式）（附小实例）

    JavaScript闭包的详细理解 一.原理:闭包函数--指有权访问私有函数里面的变量和对象还有方法等:通俗的讲就是突破私有函数的作用域,让函数外面能够使用函数里面的变量及方法. 1.第一种创建方式 ...

随机推荐

  1. Word操作（基于word2013）【非编程类】

    一.生成目录 1.word支持自动生成目录功能,生成地点为操作时光标的落点 2.生成方式:打开首选项,进入引用标签,如下图所示最左边即为目录选项. 一般有3个内置目录类型 a:手动目录,生成目录后只有 ...

  2. numpy pandas matplotlib

    import numpy as np import pandas as pd import matplotlib.pyplot as plt ---------------numpy--------- ...

  3. Oracle XE自带数据库创建的过程

    Oracle XE自带数据库如何创建的?XE.sql脚本定义实例究竟是怎样的?阅读下文,您可以找到这些问题的答案. Oracle XE自带数据库是如何创建的呢?这是很多人都提到过的问题,下面就为您详细 ...

  4. tomcat自启动脚本

    1.#cd /etc/rc.d/init.d2.#vi tomcat3.把下面的代码保存为tomcat文件,并让它成为可执行文件 chmod 755 tomcat. #!/bin/sh # # /et ...

  5. 开始SDK之旅-入门2-集成流程图、轨迹图到系统

    http://bbs.ccflow.org/showtopic-2562.aspx 经测试,基本可用,还需增加 WF/Admin/pub.ascx 首先你得先理解流程图的数据的获取方式,其他的就很容易 ...

  6. 跟着TensorFlow的进阶级教程实现MNIST库的训练

    转载出处:http://blog.csdn.net/feifei884431/article/details/51429829 背景介绍 代码实现及结果 小问题  ResourceExhaustedE ...

  7. Mysql慢查询日志过程

    原创地址 :http://itlab.idcquan.com/linux/MYSQL/922126.html mysql慢查询日志对于跟踪有问题的查询非常有用,可以分析出代码实现中耗费资源的sql语句 ...

  8. linux 内核调试之关键函数名记要

    gdbserver + gdb 调试内核 记到函数名,其它就能用gdb看了 start_kernel 内核启动 run_init_process    init进程启动 主要是根据shell脚本初始化 ...

  9. web攻击之一：XSS跨站脚本

    一.浏览器安全 同源策略 影响源的因素:host,子域名,端口,协议 a.com通过以下代码: <script scr=http://b.com/b.js> 加载了b.com上的b.js, ...

  10. HDU 3068 最长回文（manachar算法）

    最长回文 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...