Question

初级作业求助 关于svg里插入javascript

<svg height="1000" width="1000">
<circle id="1" cx="400" cy="400" r="300" stroke="black" stroke-width="3" fill="yellow" />
<rect id="2" x="365" y="425" width="75" height="75"
style="fill:blue;stroke:black;fill-opacity:1;stroke-opacity:1" />
<ellipse id="3" cx="300" cy="300" rx="30" ry="60" style="fill:blue;stroke:black;stroke-width:2" />
<ellipse id="4" cx="500" cy="300" rx="30" ry="60" style="fill:blue;stroke:black;stroke-width:2" />
<path d="m279.5,554l26.5,68c0.5,0 205.5,0 205.5,0c0,0 18,-67 18,-67c0,0 -26,58 -26,58c0,0 -187,-1 -187,-1c0,0 -9,-9 -37,-58z" stroke="black" fill="blue"/>
Sorry, your browser does not support inline SVG.
</svg>

<script type="text/javascript">
<![CDATA[
...
}
]]>
</script>

请问要怎样写function 让鼠标移到Svg的几个图形上和移开时变换图形的fill呢？
谢谢！！

Answer 1

<script type="text/javascript">
window.onload = function(){
	var t = document.getElementById("1");
	t.onmouseover = function(){
		t.style.fill = 'green';
	}
	t.onmouseout = function(){
		t.style.fill = 'yellow';
	}
}
</script>

 其余元素都差不多，只是多写几遍，添加监听罢了

Answer 2

帮你顶，看通过坐标判断能否实现