一、在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. Winform创建解决方案

    Winform的开发工具可以使用VS2005---VS2013,版本在不断升级,VS的功能也越来越强大.本系列文章采用VS2012(以后全称VS)演示. 窗体是winform开发的基础,需要掌握窗体的 ...

  2. ios 加密解密工具类字符判断等

    #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface Helpers : NSObject ...

  3. LambdaMART简介——基于Ranklib源码（一 lambda计算）

    学习Machine Learning,阅读文献,看各种数学公式的推导,其实是一件很枯燥的事情.有的时候即使理解了数学推导过程,也仍然会一知半解,离自己写程序实现,似乎还有一道鸿沟.所幸的是,现在很多主 ...

  4. Ubuntu下MySQL数据库文件 物理迁移后 出现的问题

    参考资料: https://www.cnblogs.com/advocate/archive/2013/11/19/3431606.html 本文要解决的一个问题是数据库文件进行物理迁移时遇到的问题. ...

  5. Element-ui实现loading的局部刷新

    后台管理系统loading的局部刷新 在一次vue+element-ui后台管理系统的项目中,遇到这样一个问题,引入element-ui加载框后,loading会占满整个屏幕,虽然通过改变路由实现了局 ...

  6. postgres 使用存储过程批量插入数据

    參考资料(pl/pgsql 官方文档): http://www.postgresql.org/docs/9.3/static/plpgsql.html create or replace functi ...

  7. POJ1236学校网络——tarjan

    题目:http://poj.org/problem?id=1236 Tarjan+缩点.温习一下Tarjan的写法. 1.在缩点后的TAG中,有几个联通块等价于有几个入度为0的点! 2.把它们都联通相 ...

  8. HR-人力资源管理系统（Human Resources Management System，HRMS）

    人力资源管理系统(Human Resources Management System,HRMS),是指组织或社会团体运用系统学理论方法,对企业的人力资源管理方方面面进行分析.规划.实施.调整,提高企业 ...

  9. Run-time Settings 运行时设置

    1.执行顺序设置和执行概率设置 2.迭代之间的等待时间设置 3.日志设置 4.思考时间 5.杂项 线程进程选择: 一般服务器没有安全机制选择线程执行 但是有安全机制的话 比如第一个进程50个线程 第二 ...

  10. Centos6.5安装phpldapadmin

    phpLDAPadmin是一个基于Web的LDAP管理工具用于管理LDAP服务器的各个方面.你可以利用它浏览LDAP Tree,创建/删除/修改和复制节点(entry) ,执行搜索,导入/导出LDIF ...