SVG 关键帧在 Firefox/Safari 中没有动画半径和坐标

Question

我一直在尝试为按钮重新创建 Google Ripple 效果。你可以看看：here

它适用于 Chrome，但仅适用于 chrome。而且我似乎无法弄清楚为什么。

我正在制作这样的涟漪：点击时，在按钮内创建一个 svg。使用鼠标坐标将其放置在正确的位置。然后是通过 css 关键帧动画进行动画处理，对圆半径 (r="*") 进行动画处理。

css：

body .custom-container .btn-custom .ripple-svg circle {
   opacity: 0;
   transform: traslateZ(0);
   -webkit-animation: flowAnimation 1s;
   -moz-animation: flowAnimation 1s;
   -o-animation: flowAnimation 1s;
   animation: flowAnimation 1s;
}

@-webkit-keyframes flowAnimation {
  0% {
    r: 5;
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
  }
  90% {
    r: 300;
    opacity: 0;
  }
  100% {
    r: 5;
    opacity: 0;
  }
}

@-moz-keyframes flowAnimation {
  0% {
    r: 5;
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
  }
  90% {
    r: 300;
    opacity: 0;
  }
  100% {
    r: 5;
    opacity: 0;
  }
}

@-o-keyframes flowAnimation {
  0% {
    r: 5;
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
  }
  90% {
    r: 300;
    opacity: 0;
  }
  100% {
    r: 5;
    opacity: 0;
  }
}

@keyframes flowAnimation {
  0% {
    r: 5;
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
  }
  90% {
    r: 300;
    opacity: 0;
  }
  100% {
    r: 5;
    opacity: 0;
  }
}

JS：

        // Mouse coordinates in button
        var MousePosX
        var MousePosY
        var offset = $("#flow-button").offset();

        // Set coordinates on mouse move
        $('#flow-button').on( "mousemove", function( event ) {
            MousePosX = ( event.pageX - offset.left);
            MousePosY = ( event.pageY - offset.top + 15);
        });

        // Ripple effect
        $('#flow-button').on("click", function(){
            // Append svg circle on each click
            $('#flow-button').append('<svg class="ripple-svg" height="100%" width="100%"><circle r="10" fill="black" /></svg>');

            // Append is following mouse coordinates
            $('.ripple-svg circle').css({
                cx: MousePosX,
                cy: MousePosY
            });

            // On multiple clicks delete all but the last one
            if ($('.ripple-svg').length > 2) {
                $('.ripple-svg:not(:last-child)').remove();
            }

        });

有人知道吗？

Answer 1

在 SVG 1.1 中，半径 (r) 是一个属性，而不是 CSS 属性。在 SVG 2 中，建议大多数属性应该成为 CSS 属性。

SMIL 可以为属性和 CSS 属性设置动画，但 CSS 动画只能为 CSS 属性设置动画。

Chrome 已经实现了 SVG 2 规范的这一部分（看看它的可行性）。目前还没有其他 UA 这样做，但将来他们中的任何一个都可能这样做。