Question

如果我放大并在这个矩形上滑动我的鼠标，他们中的某个人将保持半容量。如何解决，有理想的情况，如果滑动鼠标慢慢。例如这样的代码，用FireFox打开：

<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="switcher" cursor="pointer" stroke-width="0.1">
                <rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
                    <!--it scales a few times after change committed to this element -->
                    <animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.02;1.02;1" repeatCount="3" fill="freeze"/>
                    <!--it animates scale up and scale down onclick -->
                    <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"/>
                    <!--it makes half-visible selecting effect -->
                    <set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
                </rect>
            </g>

        </defs>

        <line x1="-200" y1="0" x2="200" y2="0" stroke-width="1" stroke="blue" />
        <line x1="0" y1="200" x2="0" y2="-200" stroke-width="1" stroke="blue" />

        <line x1="-200" y1="200" x2="200" y2="200" stroke-width="1" stroke="blue" />
        <line x1="-200" y1="-200" x2="200" y2="-200" stroke-width="1" stroke="blue" />


        <g transform="translate(0,-200)" >
            <g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
                <use xlink:href="#switcher" />
            </g>
        </g>

        <g transform="translate(-200,-200)" >
            <g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
                <use xlink:href="#switcher" />
            </g>
        </g>

        <g transform="translate(200,-200)" >
            <g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
                <use xlink:href="#switcher" />
            </g>
        </g>

        <g transform="translate(0,0)" >
            <g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
                <use xlink:href="#switcher" />
            </g>
        </g>

        <g transform="translate(-200,0)" >
            <g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
                <use xlink:href="#switcher" />
            </g>
        </g>

        <g transform="translate(200,0)" >
            <g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
                <use xlink:href="#switcher" />
            </g>
        </g>

    </svg>
</body>

Answer 1

好吧，我没有SVG的经验，这可能是不好的做法，但如果你添加一个额外的<set.. />来反转mouseout上的不透明度动画，那么动画就会停止＆＃34;粘贴＆＃34; （至少它在我运行Firefox 32 beta的计算机上）：

<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>

在FireFox中粘滞悬停效果onmouseover

1 个答案: