我正在玩SVG和rollOver功能，我动态创建了SVG文本和网站链接。当鼠标悬停在“Hello World”上时，文本将更改为“Click to go to SVGOpen”并带有链接。然后在鼠标不在文本时调用rollOut函数。 “Click to go to SVGOpen”将更改回“Hello World”。问题是，当我翻转时，“Hello World”不会消失，“Click to go to SVGOpen”会重叠。然后当我推出时，“去SVGOpen的CLick”不会消失。我错过了什么？这是我的示例代码
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" baseProfile="full" width="100%" height="100%" onload="init();">
<script type="text/javascript">
<![CDATA[
var xlinkns = "http://www.w3.org/1999/xlink";
var svgns="http://www.w3.org/2000/svg";
function init(){
var image=document.createElementNS(svgns, 'image');
image.setAttributeNS(null, 'x', '75px');
image.setAttributeNS(null, 'y', '125px');
image.setAttributeNS(null, 'height', '200px');
image.setAttributeNS(null, 'width', '850px');
image.setAttributeNS(xlinkns, 'xlink:href', 'svgOpen.png');
document.getElementsByTagName('svg')[0].appendChild(image);
}
/*
All in this part must happen/be assigned when the document is loaded:
create an image element that has
-a x value of 75px
-a y value of 125px
-a height of 200px
-a width of 850px
-shows the svgOpen.png
Alter the title text you created in part 1 below so that:
-is embedded inside of an 'a' tag (dynamically created <a> of course!)
-when the title text is clicked, the <a> takes you to http://www.w3.org/Graphics/SVG/
(using the <a> tag - do NOT try to go to the other page via JavaScript)
-when the title is moused over the text changes to "Click to go to SVGOpen"
-when the title is moused out the text changes back to "Your Names Practice"
*/
function rollOver(){
link=document.createElementNS(svgns, 'a');
link.setAttributeNS(null,'target','_blank');
link.setAttributeNS(xlinkns, 'xlink:href', 'http://www.w3.org/Graphics/SVG/');
var tEle=document.createElementNS(svgns,'text');
tEle.setAttributeNS(null,'id','clicky');
tEle.setAttributeNS(null,'x','150px');
tEle.setAttributeNS(null,'y','75px');
tEle.setAttributeNS(null,'fill','#999966');
tEle.setAttributeNS(null,'font-size','48px');
link.appendChild(document.createTextNode('Click to go to SVGOpen'));
tEle.appendChild(link);
document.getElementsByTagName('svg')[0].appendChild(tEle);
}
function rollOut()
{
var tEle=document.createElementNS(svgns,'rollOver()');
link.appendChild(document.createTextNode('this.parentNode.parentNode.removeChild(this.parentNode)'));
tEle.appendChild(link);
document.getElementsByTagName('svg')[0].appendChild(tEle);
}
/*
Extra Fun: (be sure you are done with all else before you try this!)
When I click on the dynamically created image above, dynamically create an ellipse
that animates...
ellipse: cx random value between 0 and 100%
cy random value between 0 and 100%
rx random value between 50 and 140
ry random value between 30 and 40
stroke width random value between 1 and 8
fill #ccffff
stroke #663399
animate: 1 to 0 opacity
duration random value between 1 and 6
when 0 is reached, remove the ellipse
animate begins on the creation
*/
/*
function imageClick()
{
var ellipse = document.createElementNS(svgns, "ellipse");
ellipse.setAttributeNS(null,"cx","Math.floor(Math.random() * 100)";
ellipse.setAttributeNS(null,"cy","Math.floor(Math.random() * 100)";
ellipse.setAttributeNS(null,"rx","Math.floor(Math.random() * 91) + 50";
ellipse.setAttributeNS(null,"ry","Math.floor(Math.random() * 11) + 30";
ellipse.setAttributeNS(null,"fill","#ccffff");
ellipse.setAttributeNS(null,"stroke","#663399");
a.appendChild(ellipse);
document.documentElement.appendChild(a);
}
*/
]]>
</script>
<!-- 1) Everything below here is to be created as tags, NOT dynamically created...
create a background that covers the WHOLE page (no matter how big) that is
#333366 -->
<g>
<rect width="100%" height="100%" style="fill: #333366; stroke: none;" />>
</g>
<!-- create a title with your name's practical! - like (B's Practice!)
at x of 150px, y of 75px, the color (#999966) and font size (48px)-->
<a>
<text x="150px" y="75px" fill="#999966" font-size="48px" onmouseover="rollOver();" onmouseout="rollOut();">
Hello World
</text>
</a>
<!-- create a rect that has:
x of 50px, y of 100px, width of 0, height of 0, fill of #ffffcc
and rounded corners of 25px!
Now, animate it so that the rect's
-width grows to 80% over 2 seconds
-height grows to 80% over 3 seconds
-rotation rotates once around 1 second AFTER the height animate is done (MUST watch the
height's id to see when it is done, NOT by time). It should take the rotation 1.5 seconds
to complete
-->
<rect x="50px" y="100px" width="0px" height="0px" rx="25px" ry="25px" style="fill: #ffffcc; stroke: none;">
<animateTransform attributeName="width" to="80%" dur="2s" fill="freeze"/>
<animateTransform attributeName="height" to="80%" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.5s" begin="6s"/>
</rect>
</svg>
答案 0 :(得分：0)
在您的onmouseover和onmouseout事件处理程序中，您只需在文档中附加元素（appendChild）。所以你所描述的并不奇怪，你没有做任何事情去除前一个元素，所以它仍然显示。您还可以继续添加，因此当您将鼠标移入和移出时，文档会不断增长和增长。
您可以通过删除每个事件处理程序中的其他元素（获取元素和调用方法removeChild）来解决此问题。
但是，除了在鼠标事件发生时添加/删除元素，更简单的方法是在文档中包含两个版本，并根据悬停状态使用CSS样式显示/隐藏它们。