我在玩SVG,并在rollOver功能中动态创建了SVG文本和网站链接。当鼠标悬停在“ Hello World”上时,带有链接的文本更改为“单击以转到SVGOpen”。然后,当鼠标不在文本中时,调用rollOut函数。将“单击以转到SVGOpen”更改回“ Hello World”。问题是,当我进行滚动时,“ Hello World”不会消失,而“ Click to go to SVGOpen”会重叠它。然后,当我推出时,“单击以转到SVGOpen”不会消失。我想念什么?这是我的示例代码

<?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>

最佳答案

onmouseoveronmouseout事件处理程序中,您只需将元素附加到文档(appendChild)。因此,您所描述的内容不足为奇,您没有做任何事情来删除前一个元素,因此它仍然显示。您还不断添加,因此文档随着鼠标的移入和移出而增长。

您可以通过删除每个事件处理程序中的另一个元素(获取元素并调用方法removeChild)来解决此问题。

但是,或者,除了在鼠标事件发生时添加/删除元素之外,一种更简单的方法是将两个版本都包含在文档中,并根据悬停状态使用CSS样式显示/隐藏它们。

关于javascript - SVG功能可用于翻转和铺展,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10610823/

10-13 01:07