Question

我有一个内联SVG，我希望在悬停时为其设置动画。它应该看起来的方式，在你悬停后，一个圆圈的大小增加并反转SVG。即不透明的东西现在是透明的。这是通过在掩码内的圆的半径参数上使用CSS转换来完成的。

动画在Safari中完美运行，但在Chrome和Opera中无法运行。在这些浏览器中，它的行为非常奇怪。简而言之，它似乎只在光标离开屏幕时重新绘制SVG。

Firefox根本没有做任何事情，但我将其归因于缺乏仇恨前缀。

提前感谢您的帮助！

我该如何解决这个问题？我可以采取哪些替代方法？

这是它的笔（似乎没有动画）：http://codepen.io/anon/pen/LGNaBw

<html>
    <head>
        <style>
        *
        {
            margin: 0;
            padding: 0;
        }

        body
        {
            width:100%;
            height:100%;

            background: #0F0F0F;
        }

        svg
        {
            position: relative;
            width: 60%;
            height:60%;

            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

        }

        #svg_tm
        {
            transition: r 350ms;
        }

        svg:hover #svg_tm
        {
            r: 50;
        }

        </style>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <defs>
                <circle id="svg_tm" cx="50" cy="50"></circle>
                <path id="svg_ts" d="M86.915 27.103c-2.716 1.204-5.636 2.02-8.7 2.385 3.128-1.875 5.53-4.843 6.66-8.38-2.926 1.735-6.168 2.996-9.618 3.675C72.494 21.84 68.557 20 64.2 20c-8.365 0-15.147 6.782-15.147 15.147 0 1.187.134 2.343.392 3.452-12.588-.633-23.75-6.663-31.22-15.827-1.304 2.237-2.05 4.838-2.05 7.615 0 5.255 2.673 9.89 6.737 12.607-2.482-.08-4.818-.76-6.86-1.894l-.002.19c0 7.34 5.222 13.462 12.15 14.854-1.27.346-2.608.53-3.99.53-.976 0-1.925-.094-2.85-.27C23.29 62.42 28.883 66.8 35.51 66.92c-5.184 4.063-11.715 6.484-18.812 6.484-1.222 0-2.428-.07-3.613-.21C19.788 77.492 27.75 80 36.305 80 64.164 80 79.4 56.92 79.4 36.903c0-.657-.014-1.31-.043-1.96 2.96-2.135 5.527-4.803 7.558-7.84"/>
                <mask id="svg_ta">
                    <use xlink:href="#svg_ts" fill="#fff"></use>
                    <use xlink:href="#svg_tm"></use>
                </mask>
                <mask id="svg_tb">
                    <use xlink:href="#svg_tm" fill="#fff"></use>
                    <use xlink:href="#svg_ts"></use>
                </mask>
            </defs>
            <circle r="50" cx="50" cy="50" fill="#F0F0F0" mask="url(#svg_ta)"></circle>
            <circle r="50" cx="50" cy="50" fill="#F0F0F0" mask="url(#svg_tb)"></circle>
        </svg>
    </body>
</html>

Chrome和Opera中的SVG转换问题

0 个答案: