一、在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. 量化投资策略：常见的几种Python回测框架（库）

    量化投资策略:常见的几种Python回测框架(库) 原文地址:http://blog.csdn.net/lawme/article/details/51454237 本文章为转载文章.这段时间在研究量 ...

  2. vs2005新建项目中没有ASP.NET WEB应用程序的解决方法

    在vs2003的年代,我们可以在项目模板中选择创建"asp.net web应用程序",可是到vs2005中,就变成了创建网站,原有的创建"asp.net web应用程序& ...

  3. jquery类的创建方式及关键字new的原理

    一.由jQuery创建类引发的问题 在用jQuery选择器时候,可以通过下面两种方式获取元素,并得到一个jQuery对象. var d1 = jQuery('#demo01'); var d2 = n ...

  4. php str_replace替换特殊字符

    替换单引号,双印,正斜杠,反斜杠等等,and,select等等 <?php $str = 'a\bc"1\'2d4/e/fgh\\\abc\\//a"bandan\'and' ...

  5. Animation获得当前播放的第几帧

    http://blog.csdn.net/cocos2der/article/details/8728443 http://www.it165.net/pro/html/201405/13204.ht ...

  6. bzoj 5006(洛谷 4547) [THUWC2017]Bipartite 随机二分图——期望DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=5006 https://www.luogu.org/problemnew/show/P4547 ...

  7. oracle 锁表/解锁 杀进程

    一些ORACLE中的进程被杀掉后,状态被置为"killed",但是锁定的资源很长时间不释放,有时实在没办法,只好重启数据库.现在提供一种方法解决这种问题,那就是在ORACLE中杀不 ...

  8. php 面试一般都遇到什么问题

    大型互联网公司会从几个方面来考核:第一:专业上,专业分为五个方向,操作系统,网络,算法,语言,数据库,一般情况下,会比较在乎Linux系统的日常使用,包括shell脚本,比较深入的话,会问kernel ...

  9. vconsole使用

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. mysql 获取一段时间的数据

    用 sql 获取一段时间内的数据: SELECT * FROM EDI.edi_history WHERE timestampdiff(day, SYSDATE(), create_time_loc) ...