-- 作者：定风波
-- 发布时间：4/8/2008 2:56:00 PM
-- 这个，动画和事件，怎么没反应。。。。。
是浏览器解译不出来\r\n还是程序有误\r\n？？？\r\n\r\n还是后缀名的错误\r\n\r\n是 xml html svg 还是xhtml
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<head>
<script>
<![CDATA[
function init()
{
var ellipse = document.getElementById('ellip1');
ellipse.addEventListener("click", mouseclick_listener, false);
boy= document.getElementById(boy');
} function mouseclick_listener(evt)
{
alert("Welcome to swjtu !\n");
} ]]>
</script>
</head>
<body onload="init();"> <svg:svg width="1024" height="768">
<svg:g id="ellip1">
<svg:ellipse id="ellip1" cx="562" cy="374" rx="50" ry="25" style="fill: red;"/>
</svg:g>
<!--wall of the campus-->
<svg:line x1="62" y1="84" x2="462" y2="84"
stroke-width="3" stroke="blue"/>
<svg:line x1="562" y1="84" x2="962" y2="84"
stroke-width="3" stroke="blue"/>
<svg:line x1="962" y1="84" x2="962" y2="334"
stroke-width="3" stroke="blue"/>
<svg:line x1="962" y1="434" x2="962" y2="684"
stroke-width="3" stroke="blue"/>
<svg:line x1="962" y1="684" x2="262" y2="684"
stroke-width="3" stroke="blue"/>
<svg:line x1="162" y1="684" x2="62" y2="684"
stroke-width="3" stroke="blue"/>
<svg:line x1="62" y1="684" x2="62" y2="384"
stroke-width="3" stroke="blue"/>
<svg:line x1="62" y1="284" x2="62" y2="84"
stroke-width="3" stroke="blue"/> <!--pe court-->
<svg:rect x="862" y="484" width="100" height="200" rx="30" ry="20"
fill="red" stroke="blue" stroke-width="2" /> <!--south gate path-->
<svg:line x1="962" y1="334" x2="762" y2="334"
stroke-width="2" stroke="brown"/>
<svg:line x1="962" y1="434" x2="762" y2="434"
stroke-width="2" stroke="brown"/>
<svg:line x1="762" y1="334" x2="762" y2="234"
stroke-width="2" stroke="brown"/>
<svg:line x1="762" y1="434" x2="762" y2="584"
stroke-width="2" stroke="brown"/> <!--east gate path-->
<svg:line x1="562" y1="84" x2="562" y2="234"
stroke-width="2" stroke="brown"/>
<svg:line x1="562" y1="234" x2="762" y2="234"
stroke-width="2" stroke="brown"/>
<svg:line x1="462" y1="84" x2="462" y2="234"
stroke-width="2" stroke="brown"/>
<svg:line x1="462" y1="234" x2="162" y2="234"
stroke-width="2" stroke="brown"/> <!--north gate path-->
<svg:line x1="62" y1="284" x2="162" y2="284"
stroke-width="2" stroke="brown"/>
<svg:line x1="162" y1="284" x2="162" y2="234"
stroke-width="2" stroke="brown"/>
<svg:line x1="62" y1="384" x2="162" y2="384"
stroke-width="2" stroke="brown"/>
<svg:line x1="162" y1="384" x2="162" y2="684"
stroke-width="2" stroke="brown"/> <!--west gate path-->
<svg:line x1="262" y1="684" x2="262" y2="584"
stroke-width="2" stroke="brown"/>
<svg:line x1="762" y1="584" x2="262" y2="584"
stroke-width="2" stroke="brown"/> <!--teaching building-->
<svg:rect x="362" y="264" width="280" height="50"
fill="none" stroke="black" stroke-width="2" />
<svg:text x="380" y="298" font-size="20"
stroke="blue">teaching building 5 6 7</svg:text>
<svg:rect x="412" y="434" width="230" height="50"
fill="none" stroke="black" stroke-width="2" />
<svg:text x="430" y="466" font-size="20"
stroke="blue">teaching building 1 2</svg:text> <!--library-->
<svg:rect x="332" y="380" width="50" height="100"
fill="none" stroke="black" stroke-width="2" />
<svg:text x="336" y="430" font-size="12"
stroke="blue">library</svg:text> <!--dormitory-->
<svg:rect x="450" y="520" width="200" height="50"
fill="none" stroke="black" stroke-width="2" />
<svg:text x="498" y="553" font-size="20"
stroke="blue">dormitory</svg:text> <!--welcome to swjtu !-->
<svg:text x="712" y="380" font-size="25"
font-family="Monotype Corsiva"
fill="orange" stroke="red">Welcome to swjtu !</svg:text> <!--click here-->
<svg:text x="525" y="378" font-size="15"
stroke="green">click here</svg:text> <!--go to dining hall-->
<svg:rect x="330" y="544" width="60" height="30"
fill="none" stroke="green" stroke-width="2" />
<svg:text x="333" y="560" font-size="10"
stroke="blue">dining hall</svg:text> <!-- Visible path -->
<svg:desc>Markers</svg:desc>
<svg:defs>
<svg:marker id="arrow"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth" markerWidth="5" markerHeight="15"
orient="auto">
<svg:path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black"/>
</svg:marker>
</svg:defs>
<svg:path d="M 960 390 L 730 390 L 730 500 L 362 500 L 362 544"
fill="none" stroke="violet" stroke-width="2"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
<svg:path d="M 960 390 L 730 390 L 730 500 L 362 500 L 362 544"
fill="none" stroke="violet" stroke-width="2" /> <!-- Group of elements to animate -->
<svg:g stroke-width="5" stroke="black" id="boy" > <!-- Stick figure pieces -->
<svg:circle cx="962" cy="374" r="10" fill="black"/>
<svg:line x1="962" y1="384" x2="947" y2="394"/>
<svg:line x1="962" y1="384" x2="977" y2="394"/>
<svg:line x1="957" y1="389" x2="957" y2="404"/>
<svg:line x1="967" y1="389" x2="967" y2="404"/>
<!-- Animation controls -->
<svg:animateMotion path="M 960 390 L 750 390 L 750 500 L 362 500 L 362 544"
dur="10s" repeatCount="indefinite"
rotate="auto" />
</svg:g>
</svg:svg> </body>
</html>
|