一、在HTMl中访问SVG的DOM

  1. 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">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5.  <script language="javascript">
  6. window.onload = function(){
  7.     //获得SVG文档的DOM结构
  8.      var svgdoc = document.getElementById("id1").getSVGDocument();
  9. }
  10.  </script>
  11.  </head>
  12.  <body>
  13.  
  14.  <!-- 插入SVG文档 -->
  15.  <embed id="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" src="a.svg" height="200px" width="400px" type="image/svg+xml">
  16.  
  17. </body>
  18. </html>

二、在SVG文档中嵌入JavaScript

  1. Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  2. <svg xmlns="http://www.w3.org/2000/svg"
  3. width="3.5in" height="1in">
  4. <title>Listing 24-1 from the XML Bible</title>
  5. <script type="text/javascript">
  6. <![CDATA[
  7. alert(123);
  8. ]]>
  9. </script>
  10. <circle r="30" cx="34" cy="34"
  11. style="fill: red; stroke: blue; stroke-width: 2" />
  12. </svg>

三、在SVG文档中链接外部JavaScript

  1. Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  2. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  3. width="3.5in" height="1in">
  4. <title>Listing 24-1 from the XML Bible</title>
  5. <circle id="x" r="30" cx="34" cy="34"
  6. style="fill: red; stroke: blue; stroke-width: 2" />
  7. <script type="text/javascript" xlink:href="a.js">
  8. </script>
  9. </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. CF1056：Check Transcription（被hack的hash）

    One of Arkady's friends works at a huge radio telescope. A few decades ago the telescope has sent a ...

  2. 20155323 2016-2017-2 《Java程序设计》第8周学习总结

    20155323 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 日志API:使用日志的起点是Logger类,要取得Logger类,必须使用Logger的静态 ...

  3. streamsets record header 属性

    record 的header 属性可以在pipeline 逻辑中使用. 有写stages 会为了特殊目录创建reord header 属性,比如(cdc)需要进行crud 操作类型的区分 你可以使用一 ...

  4. minio 集群搭建

      具体实际的取舍可以参考官方文档,我使用的是4 node 4 driver 模式 环境机器说明 192.168.31.2 192.168.31.3 192.168.31.4 192.168.31.5 ...

  5. socket编程---TCP

    服务器端先初始化Socket,然后与端口绑定(bind),对端口进行监听(listen),调用accept阻塞,等待客户端连接.在这时如果有个客户端初始化一个Socket,然后连接服务器(connec ...

  6. Spring线程池ThreadPoolTaskExecutor配置及详情

    Spring线程池ThreadPoolTaskExecutor配置及详情 1. ThreadPoolTaskExecutor配置 <!-- spring thread pool executor ...

  7. MySql登陆密码忘记了 怎么办？

    MySql登陆密码忘记了 怎么办?root密码:连root密码忘记没用root进修改mysql数据库user表咯 root密码: 方法一:MySQL提供跳访问控制命令行参数通命令行命令启MySQL服务 ...

  8. nginx 自签名证书 配置 https

    最近在研究nginx,整好遇到一个需求就是希望服务器与客户端之间传输内容是加密的,防止中间监听泄露信息,但是去证书服务商那边申请证书又不合算,因为访问服务器的都是内部人士,所以自己给自己颁发证书,忽略 ...

  9. Ubuntu各种indicator汇总

    1.  indicator-multiload: 可视化图形显示 sudo apt-get install indicator-multiload 2. indicator-sysmonitor: 以 ...

  10. 单链表LRU

    单链表实现lru 越靠近链表尾部的节点是越早之前访问的 当有一个新的数据被访问时,从链表头开始顺序遍历链表 1.如果此数据之前已经被缓存在链表中 遍历得到这个数据对应的节点,并将其从原来的位置删除,然 ...