-1

我正在尝试使用 SVG SMIL 动画制作悬停效果。需要纠正 mouseovermouseout: mouseover=scale+15%andopacity-50%和 mouseout 反向。将鼠标悬停在我的敏感矩形中的单独元素上时没有跳转。谢谢

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <svg version="1.1" xmlns:x="&amp;ns_extend;" xmlns:i="&amp;ns_ai;" xmlns:graph="&amp;ns_graphs;"
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" 
        xmlns:a="http://ns.adobe.com/adobesvgviewerextensions/3.0/" 
        x="0px" y="0px" width="800" height="600" viewBox="-400 -300 800 600" xml:space="preserve" font-family="arial" font-size="14">
            
            <defs>
                <!-- switched off -->
                <g id="dscn.n" cursor="pointer">
                    <g>
                        <g>
                            <g>
                                <rect x="-0.5" y="-0.5" width="1" height="1" fill="white" stroke-width="0.0" />
                                <line x1="-0.5" y1="-0.5" x2="-0.5" y2="0.5" stroke-width="0.05"  stroke-linecap="round"/><!-- left vertical -->
                                <circle cx="0.5" cy="0.0" r="0.05" stroke-width="0"  /><!-- dot -->
                                <circle cx="-0.5" cy="0.0" r="0.05" fill="white" stroke-width="0.01" />
                                
                                <line x1="0.5" y1="0" x2="-0.15" y2="-0.5" stroke-width="0.05" stroke-linecap="round" /><!-- off -->
                            </g>
                            <!--<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5" dur = "0.2s/>-->
                            <animate id="animation1"
                            attributeName="stroke-opacity"
                            from="1" to="0.5" dur="1s"
                            begin="mouseover" fill="freeze" />
                            
                            <animate id="animation2"
                            attributeName="opacity"
                            from="0.5" to="1" dur="1s" 
                            begin="animation1.end" />
                            
                            <animateTransform attributeName="transform" attributeType="XML"
                            type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
                            fill="freeze" additive="sum"/>
                        </g>
                        
                    </g>
                </g>
            </defs>
            <line x1="-200" y1="-200" x2="200" y2="-200" stroke-width="1" stroke="blue" />
            
            <g transform="translate(-200,-200)" >
                <title>dscn.n</title>
                <g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
                    <use xlink:href="#dscn.n" />
                </g>
            </g>
        </svg>
    </body>
</html>

4

1 回答 1

0 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <svg version="1.1" xmlns:x="&amp;ns_extend;" xmlns:i="&amp;ns_ai;" xmlns:graph="&amp;ns_graphs;"
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" 
        xmlns:a="http://ns.adobe.com/adobesvgviewerextensions/3.0/" 
        x="0px" y="0px" width="800" height="600" viewBox="-400 -300 800 600" xml:space="preserve" font-family="arial" font-size="14">
            <defs>
                <g id="dscn.n" cursor="pointer">
                    
                    <g id="rectangl">
                        <rect x="-0.5" y="-0.5" width="1" height="1" fill="white" stroke-width="0.0" />
                        <line x1="-0.5" y1="-0.5" x2="-0.5" y2="0.5" stroke-width="0.05"  stroke-linecap="round" pointer-events="none"/><!-- left vertical -->
                        <circle cx="0.5" cy="0.0" r="0.05" stroke-width="0" pointer-events="none" /><!-- dot -->
                        <circle cx="-0.5" cy="0.0" r="0.05" fill="white" stroke-width="0.01" pointer-events="none" />
                        
                        <line x1="0.5" y1="0" x2="-0.15" y2="-0.5" stroke-width="0.05" stroke-linecap="round" pointer-events="none" /><!-- off -->
                        
                        <animateTransform attributeName="transform" attributeType="XML"
                        type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
                        fill="freeze"/>
                        <animateTransform attributeName="transform" attributeType="XML"
                        type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
                        fill="freeze"/>
                        
                        <animate id="animation1"
                        attributeName="stroke-opacity"
                        from="1" to="0.5" dur="0.5s"
                        begin="mouseover" fill="freeze" />
                        <animate id="animation2"
                        attributeName="stroke-opacity"
                        from="0.5" to="1" dur="0.5s" 
                        begin="mouseout" fill="freeze" />
                    </g>
                </g>
            </defs>
            <line x1="-200" y1="-200" x2="200" y2="-200" stroke-width="1" stroke="blue" />
            <g transform="translate(-200,-200)" >
                <title>dscn.n</title>
                <g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
                    <use xlink:href="#dscn.n" />
                </g>
            </g>
        </svg>
    </body>
</html>

于 2014-08-04T17:08:59.470 回答