SVG圓和框陰影動畫的麻煩

我試圖向SVG圓圈添加一個漣漪/聲納脈衝類型的動畫，但它沒有做任何事情。這裏有一個小提琴顯示問題：http://jsfiddle.net/scole/ono0awyw/SVG圓和框陰影動畫的麻煩

在小提琴中，所需的效果對屏幕中心的空白div元素起作用，但將相同的CSS動畫類應用於SVG圈不起作用。是不可能動畫盒陰影變化？

我真的很想將解決方案作爲一個CSS類的應用程序保存到SVG元素上。

謝謝！史蒂夫

我不能發佈的小提琴鏈接沒有一些代碼，所以這裏的CSS類，動畫是基於：

.ripple,.ripple:before,.ripple:after { 
    display:block; 
    border-radius:2px; 
    margin:0 auto; 
    width:2px; 
    height:2px; 
    -webkit-animation:rip 2s infinite; 
    -moz-animation:rip 2s infinite; 
} 
.ripple { 
    position:absolute; 
    z-index:1000; 
    top:10px; 
    left:15px; 
} 
.ripple:before,.ripple:after { 
    content:''; 
    position:absolute; 
} 
.ripple:before {-webkit-animation-delay:.1s;-moz-animation-delay:.2s;top:5px;left:0px;} 
.ripple:after {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:0;} 
@-webkit-keyframes rip 
{ 
    0% { 
    box-shadow:0 0 0 0 transparent, 
       0 0 0 0 transparent, 
       0 0 0 0 transparent, 
       0 0 0 0 transparent; 
    } 
    5% { 
    box-shadow:0 0 0 0 transparent, 
       0 0 0 0 rgba(255,0,0,0.5), 
       0 0 0 0 transparent, 
       0 0 0 0 rgba(0,0,0,0.1); 
    } 
    100% { 
    box-shadow:0 0 40px 50px transparent, 
       0 0 10px 60px transparent, 
       0 0 30px 70px transparent, 
       0 0 5px 80px transparent; 
    } 
} 
@-moz-keyframes rip 
{ 
    0% { 
    box-shadow:0 0 0 0 transparent, 
       0 0 0 0 transparent, 
       0 0 0 0 transparent, 
       0 0 0 0 transparent; 
    } 
    5% { 
    box-shadow:0 0 0 0 transparent, 
       0 0 0 0 rgba(255,0,0,0.5), 
       0 0 0 0 transparent, 
       0 0 0 0 rgba(0,0,0,0.1); 
    } 
    100% { 
    box-shadow:0 0 10px 75px transparent, 
       0 0 20px 75px transparent, 
       0 0 30px 75px transparent, 
       0 0 40px 75px transparent; 
    } 
}

來源

2014-08-27 Scole

動畫不能正常工作，因爲你不能使用CSS僞元素（::before和::after）在SVG元素上，如<circle>。它們旨在僅應用於HTML元素。

來源

2014-08-27 22:26:40

這是一件令人失望的事情，它無法完成，但這是它有時候的方式。我將使用縮放比例來結合變換。感謝您的解釋！ – Scole 2014-08-28 19:30:05

您可以使用SVG動畫來達到相同或相似的效果。 SVG動畫元素幾乎適用於除IE以外的所有瀏覽器。不過，我認爲有一個第三方庫增加了支持。 – 2014-08-29 02:05:47

SVG圓和框陰影動畫的麻煩

回答

相關問題