我尝试做的是使用onmouseover和onmouseout来改变其中一只眼睛的颜色。
<!DOCTYPE html>
<html>
<svg height="400" width="500">
<circle cx="200" cy="200" r="180" stroke="black" stroke-width="3" fill="yellow" />
<ellipse cx="130" cy="140" rx="25" ry="40" style="fill:blue" stroke="black" stroke-width="2"/>
<ellipse cx="270" cy="140" rx="25" ry="40" style="fill:blue" stroke="black" stroke-width="2" />
<rect x="180" y="200" width="50" height="50" style="fill:blue" stroke="black" stroke-width="2" />
<polyline points="100,250 150,320 280,320 330,250 270,300 160,300 100,250" style="fill:blue" stroke="black";stroke-width="2" />
<script type="text/javascript">
<![CDATA[
function onmouseover(evt) {
document.getElementById('eye1').setAttribute("fill", col);
function onmouseout(evt) {
document.getElementById('eye1').setAttribute("fill", col);
}
]]>
</script>
<ellipse cx="130" cy="140" rx="25" ry="40" style="fill:blue" stroke="black" stroke-width="2" id="eye1" onmouseover="changeColor('red')"
onmouseout="changeColor('green')"
/>
</svg>
</html>