SVG中的Javascript [英] Javascript in SVG

问题描述

我创建了一个包含5个多边形的SVG文件，然后需要嵌入Javascript，以便将鼠标悬停时多边形中的4种颜色更改为Red，将鼠标移出时，颜色更改为Green.我试图编写代码，但是没有用，可能是什么问题?感谢您的帮助和提示！

I created a SVG file contains 5 polygons, then I need to embed Javascript so 4 of the polygons' color changes to Red when mouseover, and when mouseout, the color changes to Green. I tried to write the code but it didn't work, what could be the problem? Thanks for help and tips!

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="26cm" height="24cm" viewBox="0 0 2600 2400" version="1.1" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink= "http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[

document.getElementById("test").onmouseover = function(){changeColor()};

function changeColor() {
document.getElementById("test").style.color = "red";
}

document.getElementById("test").onmouseout = function(){changeColor()};

function changeColor() {
document.getElementById("test").style.color = "green";
}

]]>
</script>
<circle cx="1600" cy="700" r="600" fill="yellow" stroke="black" stroke-width="3"/>
<ellipse id="test" cx="1300" cy="500" rx="74" ry="120" fill="blue" stroke="black"  stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<ellipse id="test" cx="1850" cy="500" rx="74" ry="120"  fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<rect id="test" x="1510" y="650" width="160" height="160" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<polygon id="test" points="1320,800 1370,1080 1820,1080 1870,800 1820,1000 1370,1000" name="mouth" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/> 

</svg>

推荐答案

您遇到各种错误

1. 您有两个名为changeColor的函数，这些函数必须具有唯一的名称

1. you've two functions called changeColor, functions must have unique names

SVG不使用color为元素着色，而是使用fill(和stroke).

SVG does not use color to colour elements, instead it uses fill (and stroke).

id值必须唯一，您可能想用class替换id，然后使用getElementsByClassName而不是getElementById.如果这样做，您将需要处理多个元素.我尚未完成那部分，您应该自己尝试一下，以便了解发生了什么.

id values must be unique, you probably want to replace id by class and then use getElementsByClassName instead of getElementById. If you do that you'll need to cope with more than one element though. I've not completed that part, you should try it yourself so you understand what's going on.

我从我的版本中删除了一个ID，因此您可以在左眼看到它.

I've removed all but one id from my version so you can see it working on the left eye.

document.getElementById("test").onmouseover = function(){changeColor()};

function changeColor() {
document.getElementById("test").style.fill = "red";
}

document.getElementById("test").onmouseout = function(){changeColor2()};

function changeColor2() {
document.getElementById("test").style.fill = "green";
}

<svg width="26cm" height="24cm" viewBox="0 0 2600 2400" version="1.1" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink= "http://www.w3.org/1999/xlink">

<circle cx="1600" cy="700" r="600" fill="yellow" stroke="black" stroke-width="3"/>
<ellipse id="test" cx="1300" cy="500" rx="74" ry="120" fill="blue" stroke="black"  stroke-width="3"/>
<ellipse cx="1850" cy="500" rx="74" ry="120"  fill="blue" stroke="black" stroke-width="3" />
<rect x="1510" y="650" width="160" height="160" fill="blue" stroke="black" stroke-width="3" />
<polygon points="1320,800 1370,1080 1820,1080 1870,800 1820,1000 1370,1000" name="mouth" fill="blue" stroke="black" stroke-width="3"/> 

</svg>

这篇关于SVG中的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！