在Firefox/Safari中SVG关键帧不动半径和坐标

Question

我一直在尝试为按钮重新创建Google效果。你可以看到它：这里

它在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;
  }
}

联署材料：

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

在SVG1.1中，radius (r)是一个属性，而不是CSS属性。在SVG 2中，大多数属性应该成为CSS属性。

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

Chrome已经实现了SVG 2规范的这一部分(看看它的可行性)。目前还没有其他普遍获得服务的国家这样做，但今后任何一个都可能这样做。