一、在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. Centos 6 下安装 erlang 手记

    基于openfire的IM项目已经成功上线,接下来的计划准备開始调研 ejabberd.  ejabberd  是基于erlang开发的.那么就先从搭建 erlang环境開始吧. 选择的操作系统为Ce ...

  2. vs2013 乱码问题

    单击一下代码框  然后点文件  有个高级保存选项  改成utf-8  就可以显示中文了

  3. Dictionary字典类介绍

    说明     必须包含名空间System.Collection.Generic      Dictionary里面的每一个元素都是一个键值对(由二个元素组成:键和值)      键必须是唯一的,而值不 ...

  4. [LeetCode系列] 最长回文子串问题

    给定字符串S, 找到其子串中最长的回文字符串.   反转法: 反转S为S', 找到其中的最长公共子串s, 并确认子串s在S中的下标iS与在S'中的下标iS'是否满足式: length(S) = iS ...

  5. C# zedgraph 怎么设置初始时坐标轴的比例？？

    http://bbs.csdn.net/topics/390872329 已解决,,,我问是刷新图用的,,我以为mypane.YAxis.Scale.Min=0; mypane.YAxis.Scale ...

  6. ACM-Team Tic Tac Toe

    我的代码: #include <bits/stdc++.h> using namespace std; int main() { char a[3][3]; int i,j=0; for( ...

  7. Winfrom 开源组件Control.FirefoxDialog使用

    1. 如果窗体是以模式窗体方式打开的,会出现点了应用,窗体就立马关闭.此时可能别的设置需要一块设置,这种就存在问题. var form1 = new Form1(); form1.ShowDialog ...

  8. 【转】java内存分配和String类型的深度解析

    一.引题 在java语言的所有数据类型中,String类型是比较特殊的一种类型,同时也是面试的时候经常被问到的一个知识点,本文结合java内存分配深度分析关于String的许多令人迷惑的问题.下面是本 ...

  9. 常用数据结构的功能及复杂度总结(OI)

    不定长数组 维护一个序列 在末尾插入/删除均摊O(1) 任意位置插入O(n) 指定位置查询/修改O(1) 空间O(n) 链表 维护一个序列 定位到第i个位置O(n) 在任意位置(已定位到该位置)插入/ ...

  10. Oracle 11g 新特性 -- Oracle Restart 说明（转载）

    转载:http://blog.csdn.net/tianlesoftware/article/details/8435670 一．  OHASD 说明 Oracle 的Restart 特性是Oracl ...