FireFox 中鼠标悬停的粘性悬停效果答案

【问题标题】：Sticky hover-effect onmouseover in FireFoxFireFox 中鼠标悬停的粘性悬停效果
【发布时间】：2014-09-30 04:19:58
【问题描述】：

如果我放大并在此矩形上滑动鼠标，其中有人将保持一半容量。怎样才能解决，有理想的情况，如果慢慢滑动鼠标会是这样。比如这样的代码，用火狐打开：

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

【问题讨论】：

标签： html firefox svg svg-animate smil

【解决方案1】：

好吧，我在 SVG 方面没有经验，这可能是不好的做法，但是如果您添加一个额外的 <set.. /> 以在鼠标悬停时反转不透明动画，动画将不再“粘滞”（至少它在我的运行 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"/>

【讨论】：

它有效，谢谢）第二个解决方案，也许会添加一个时间间隔
begin="mouseout+0.1s"