Chrome 和 Opera 中的 SVG 过渡问题

Question

我有一个内联 SVG，我想在悬停时为其设置动画。它应该看起来的样子，在您将鼠标悬停后，一个圆圈会变大并反转 SVG。 IE。不透明的现在变得透明了。这是通过在遮罩内圆的半径参数上使用 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>

Answer 1

使用 SVG (1.1)，您不能修改 r 和 CSS 等属性。仅样式属性。

List of SVG style properties

即将推出的 SVG2 规范允许它，一些浏览器已经开始实现它，但大多数还没有。

您需要使用另一种方法来设置半径动画。

Chrome 和 Opera 中的 SVG 过渡问题

SVG transition issues in Chrome and Opera

css

opera

svg

transition

google-chrome