一、在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. ZetCode PyQt4 tutorial work with menus, toolbars, a statusbar, and a main application window

    !/usr/bin/python -*- coding: utf-8 -*- """ ZetCode PyQt4 tutorial This program create ...

  2. BZOJ1718: [Usaco2006 Jan] Redundant Paths 分离的路径【边双模板】【傻逼题】

    LINK 经典傻逼套路 就是把所有边双缩点之后叶子节点的个数 //Author: dream_maker #include<bits/stdc++.h> using namespace s ...

  3. 使用TortoiseGit+码云管理项目代码

    1.下载安装msysgit. 2.下载安装tortoisegit. 3.创建ssh密钥. 开始–所有程序–TortoiseGit–PuTTYgen 生成方法:点击“Generate”后,鼠标在key下 ...

  4. conan c&&c++ 包管理工具使用

    测试使用的是JFrog Artifactory CE 进行的私有包管理,具体的安装可以参考相关文档 启动JFrog Artifactory CE 使用docker docker run -d -p 8 ...

  5. 【转】shell 编程：冒号 后面跟 等号，加号，减号，问号的意义

    原文网址:http://blog.csdn.net/trochiluses/article/details/9048539 缺省值(:-)   如果变量后面跟着冒号和减号,则变量后面跟着是这个变量的缺 ...

  6. opencv中读取显示图像

    opencv是个开源的图像处理的库,小到基本的图像处理函数,如图像移动放大缩小,大到人脸识别,部分机器学习的知识,所以是个学习的不错的库.之前有图像处理的知识,这次再学习下这个开源库. 先上基础的图像 ...

  7. sysbench 0.5使用手册

    注意:本文刚开始只介绍了sysbench 0.5之前的版本,在了解了sysbench 0.5之后进行了补充,大部分测试和参数都是一样的,只是sysbench 0.5 在测试数据库方面更加全面丰富. 关 ...

  8. windows server 2012 双网卡配置

    别用route 命令!!!!!! 在使用最新版的windows server 2012的时候,当存在两个或者多个网段的时候,就可以采用双网卡的方式来添加和配置路由.具体的设置方法如下: 网段1  19 ...

  9. Apache Commons Codec 与消息摘要算法(hash算法)

    首先我们要明白 Codec 是什么含义.它是 Coder + decoder = Codec,也就是编码器解码器.即是编码器,也是解码器. 官网地址:http://commons.apache.org ...

  10. phpstorm破解 IntelliJ IDEA License Server本地搭建教程 http://blog.lanyus.com/archives/174.html/comment-page-6#comments 附件：mac环境

    ilanyu's Blog 搜索关键字搜索 首页IDEA注册码文件中转在线记事本老博客关于 IntelliJ IDEA License Server本地搭建教程 作者: ilanyu 时间: Marc ...