svg webtopo原型5 基本的事件-优快云博客

本文探讨了SVG图形中的事件处理，包括SVG支持的JavaScript事件以及JS如何与SVG交互。内容涵盖内嵌SVG中的事件处理，如内嵌JS，并指出在SVG group元素上直接触发点击事件的限制，只能通过其子元素进行交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个例子是测试svg自身的事件。

Svg支持js事件。

Js可以包含在svg中(hi1)，可以被svg外部引用(hi2)，也可以包含在父页面中，或者被父页面外部引用。也可以通过onclick事件简单地添加或者修改。

需要注意， group上不能直接被点中，只有它的子元素可以被选中

5event.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
图例
</title>

<!-- legengd.html
 1.测试动态创建事件
 2.兼容ie和opera.ie用embed（empty.svg,只包含一个组g1）,
  opera用create
-->
</head>
<script type="text/javascript" language="javascript" src=".\js\svg.js"></script>
<script>

</script>

<body bgcolor="#ffffff">

<br>
<button onclick="show()">开始</button><br>
<button onclick="showsrc()">源码</button><br>
<div id="divsvg">
<embed name="svg1" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="5event.svg" height=150 width=150 type="image/svg+xml">
</div>
</body>
<script>
var svg;
var plat;





function show(){
 //var svg;
 //ie使用embed方式预先加载svg
 svg=initSVG(200,200,1);
 //svg=document.getElementById("svg1");  
 var svgdoc;
 svgdoc=getSVGDocument(svg);
 //plat=svgdoc.getElementById('newSVGDoc');
 
 //更换事件
 var img0=svgdoc.getElementById('confirmMask');
 img0.setAttribute("onclick","hi2()");
 

 }
</script>
</html>

内嵌的svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
<svg width="50cm" height="40cm" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 <script language="JavaScript" xlink:href="./js/insvg.js" />
 <script><![CDATA[
 //测试svg内部的函数事件
 function hi1(){//========loading pic main function===
  alert("hi1");
  }

//group上不能直接被点中，只有它的子元素可以被选中
function clickg(evt,obj){
 //opera中为group
 //alert(obj.id);
 //ie中为矩形
 alert(evt.target.id);
}
 ]]>
</script>
<rect id="confirmMask" x="10" y="10" width="66" height="24" rx="2"
     style="stroke:black;fill:blue;fill-opacity:0.0" onclick="hi1()"/>
     
<g id="newSVGDoc" x="80" y="30" width="100" height="100" onmousedown="clickg(evt,this)">
    <rect id="confirmMask" x="80" y="30" width="50" height="20" rx="2"
     style="stroke:black;fill:blue;fill-opacity:0.0" /> 
</g>     
</svg>

内嵌的js