原文：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. ASP.NET MVC 实现区域 项目分离 (比较好的方式)

    说明: ZRT.Web 是前台网站,目录[D:\ZRT.Web\] ZRT.Admin 是后台管理,目录[D:\ZRT.Web\Applications\Admin\],删除文件[Global.asa ...

  2. 探索ORM ————iBati（一）

    ibatis   iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目.最初侧重于密码软件的开发,现在是一个基于Jav ...

  3. leetCode题解之删除单链表中指定的元素

    1.问题描述 Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> ...

  4. mysql(5.7.17)字符集设置(character_set/collation)

    0 查看字符集(character_set/collation) use information_schema;desc tables;    --一定记住tables表,information_sc ...

  5. 初始docker

    什么是docker? 很多人都是使用docker但是对docker的理解其实并没有这么透彻,只知道怎么用但是不知道为什么用 什么时候去用. 一.环境配置的难题 软件开发最大的麻烦事之一,就是环境配置. ...

  6. 生成器（generator），迭代器（yield）

    g=(i for i in range(10)) #小括号表示生成一个迭代生成器.[]是列表生成器 g.__next__() yield将一个函数变成生成器 import time def f(): ...

  7. 《CDN 之我见》原理篇——CDN的由来与调度

    CDN是将源站内容分发至全国所有的节点,从而缩短用户查看对象的延迟,提高用户访问网站的响应速度与网站的可用性的技术.它能够有效解决网络带宽小.用户访问量大.网点分布不均等问题. 为了让大家更全面的了解 ...

  8. .net 和 core 数据库连接字符串

    Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-xxxx.mdf;Initial Catalog= ...

  9. 17:54 思维导图coggle布置好了

    钱不是好赚的,要赚钱就要冒险,就会有损失.为了家庭还是旱涝保收一点好,没有现金流什么都是白搭,通过博客来学习也是件不错的是,问题是我现在完全没有想法,比如冒泡算法什么的,没有概念,背不出来,其实可以推 ...

  10. RYU基础整理

    1. RYU结构,源码 1.1 RYU文件目录 下面介绍ryu/ryu目录下的主要目录内容. base base中有一个非常重要的文件:app_manager.py,其作用是RYU应用的管理中心.用于 ...