SVG与HTML、JavaScript的三种调用方式

一、在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"属性会报错

时间： 2024-11-06 04:24:28

SVG与HTML、JavaScript的三种调用方式的相关文章

Code-C#-Delegate：委托（delegate）的三种调用方式：同步调用，异步调用，异步回调

ylbtech-Code-C#-Delegate:委托(delegate)的三种调用方式:同步调用,异步调用,异步回调 1.返回顶部 1. 下面为即将被调用的方法: public delegate int AddHandler(int a, int b); public class 加法类 { public static int Add(int a, int b) { Console.WriteLine("开始计算:" + a + "+" + b); Thread.

Vue组件的三种调用方式

最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然它们有按需引入的功能,但是整体风格和我的整个系统不搭.于是就可以考虑自己手动实现这些简单的组件了. 通常我们看Vue的一些文章的时候,我们能看到的通常是讲Vue单文件组件化开发页面的.单一组件开发的文章相对就较少了.我在做fj-service-system项目的时候,发现其实单一组件开发也是很有意思

【JS】Js中函数的三种调用方式

在同一个页面中,函数名必须是唯一的,并且区分大小写.Js中可以通过下面三种方式调用函数: 1. 函数的简单调用 2. 在事件的响应中调用函数 3. 通过连接调用函数具体是怎么操作的呢,下面一一讲解: 函数的简单调用:函数的定义语句通畅被放在HTML文件的<head>内,而函数的调用语句通常被放在<body>中.如果函数定义之前调用函数,执行将会出错. 语法如下: <head> <script type="text/javascript">

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

1:同步调用:一种阻塞式调用,调用方要等待对方执行完毕才返回,它是一种单向调用 2:回调:一种双向调用模式,也就是说,被调用方在接口被调用时也会调用对方的接口: 3:异步调用:一种类似消息或事件的机制,不过它的调用方向刚好相反,接口的服务在收到某种讯息或发生某种事件时,会主动通知客户方(即调用客户方的接口 ) 实例2:老师平时学生布置任务后不可能一直等待和监督学生完成,老师通常会告诉学生,任务完成后给他打个电话或者发个信息,那么学生给老师返回结果的过程需要老师信息,这就是一个回调的过程.

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.) <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button> 2.HTML页面中直接使用JS: <script type="text/javascript">

unity中三种调用其他脚本函数的方法

第一种,被调用脚本函数为static类型,调用时直接用脚本名.函数名().很不实用-- 第二种,GameObject.Find("脚本所在物体名").SendMessage("函数名"); 此种方法可以调用public和private类型函数第三种,GameObject.Find("脚本所在物体名").GetComponent<脚本名>().函数名();此种方法只可以调用public类型函数 unity中三种调用其他脚本函数的

JavaScript的三种工业化玩法

JavaScript的三种工业化玩法软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScript同样需要软件调试技术,希望本文总结的三种工具会对大家的学习有所帮助. 任何语言的学习都离不开实践,不写代码是永远学不会编程的,当然javascript也不例外,很多人推荐直接浏览器调试,个人觉得这个推荐应该是非常初级的,比如Chrome, Firefox确实提供了实用的前端调试工具,但是个人认为

使用JavaScript判断图片是否加载完成的三种实现方式

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src="http:/

canvas入门-1三种填充方式、渐变、模式

1.定义canvas的尺寸的时候最好用html的方式定义,用width和height的方式,用css会导致画布按照css设定的方式进行缩放,cavas内部是一个2d的渲染环境 2.一个canvas对应一个2d的渲染环境,绘制图形的操作都是在2d渲染环境中进行的 <canvas id="canvas-1" style="border:solid 1px gray;" width = "400" height="400"&g