-2

If I zoom in and slide my mouse on this rectangles someone of them will stay half-capacity. How can it to fix, to have got ideal situation, as it would be if slide mouse slowly. For example code like this, open with 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>

4

1 回答 1

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"/>
于 2014-08-07T05:45:04.233 回答