原文：https://www.cnblogs.com/guohu/p/5085045.html

一、在HTMl中访问SVG的DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
2
3
4
5
6
7
8
9
10
11
12
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

1
2
3
4
5
6
7
8
9
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的三种调用方式

    一.在HTMl中访问SVG的DOM Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHig ...

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

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

  3. javaScript的三种储存方式

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

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

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

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

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

  6. hive三种调用方式

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

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

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

  8. JavaScript的三种工业化调试方法

    JavaScript的三种工业化玩法 软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScri ...

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

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

随机推荐

  1. fastdfs搭建和使用

    目录 前言 安装 安装插件 tracker storage 用自带的 client 进行测试 想要查看结果必须安装nginx 使用示例 引用 配置 使用 前言 参考网址 错误处理 安装 安装插件 yu ...

  2. 将DataRow赋值给model中同名属性

    /// <summary> /// 将DataRow赋值给model中同名属性 /// </summary> /// <typeparam name="T&qu ...

  3. CompletionService和ExecutorCompletionService

    CompletionService用于提交一组Callable任务,其take方法返回已完成的一个Callable任务对应的Future对象.   如果你向Executor提交了一个批处理任务,并且希 ...

  4. 用Spider引擎解决数据库垂直和水平拆分的问题

    作者介绍 张秀云,网名飞鸿无痕,现任职于腾讯,负责腾讯金融数据库的运维和优化工作.2007年开始从事运维方面的工作,经历过网络管理员.Linux运维工程师.DBA.分布式存储运维等多个IT职位.对Li ...

  5. MdelForm 和formset

    我们以前接触过Form组件就是堆你的字段进行校验的  现在我来看看ModelForm ModelForm比你的Form方便了一万倍 from django import forms 生成form类 c ...

  6. MacOS（苹果电脑&苹果系统）连接京瓷300i 打印机

    前往京瓷官网下载打印机驱动: http://www.kyoceradocumentsolutions.com.cn/support/mfp/download/taskalfa300i.html 驱动安 ...

  7. 使用Ajax无刷新页面登录

    <script> window.onload = function () { var myname = document.getElementById("uname") ...

  8. Alpha 冲刺报告(7/10)

    Alpha 冲刺报告(7/10) 队名:洛基小队 峻雄(组长) 已完成:参考已有资源设计角色属性 明日计划:完善并编码 剩余任务:角色的属性脚本 困难:编码进展缓慢 -------------- 非易 ...

  9. APP案例分析——嘀嗒番茄钟

    第一部分 调研, 评测 个人第一次上手体验 一直在用时间管理的软件,但是下载了卸载,来来去去也用了很多个.这个嘀嗒番茄钟也是最近比较喜欢的软件,界面简洁,功能简单,没有那么复杂非常容易上手. 功能性的 ...

  10. python多进程（三）

    消息队列 消息队列”是在消息的传输过程中保存消息的容器. 消息队列最经典的用法就是消费者和生成者之间通过消息管道来传递消息,消费者和生成者是不通的进程.生产者往管道中写消息,消费者从管道中读消息.   ...