使用CSS動畫調整SVG圓半徑的大小

我試圖用CSS動畫SVG圓的半徑屬性。同時（使用Firefox Inspect Element工具），我可以看到動畫本身已設置並正確運行，「.innerCircle」的大小沒有明顯改變。使用CSS動畫調整SVG圓半徑的大小

如果你能發現任何我明顯錯過的東西，或者以任何方式提供幫助，我會非常感激。我對此很新，所以如果我對這個錯誤有所瞭解，請善良！

我粘貼下面的文件以供參考。

再次感謝。

styling.css：

@keyframes buttonTransition { 
    from { 
     r: 5%; 
    } 
    to { 
     r: 25%; 
    } 
} 

.innerCircle { 
    animation-duration: 1s; 
    animation-iteration-count: infinite; 
    animation-name: buttonTransition; 
}

的index.html：

<html> 
    <head> 
     <link href = "styling.css" rel = "stylesheet" type = "text/css"></link> 
    </head> 
    <body> 
     <svg class = "button" expanded = "true" height = "100px" width = "100px"> 
      <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/> 
      <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/> 
     </svg> 
    </body> 
</html>

來源

2015-09-05 Nathan Russell

在SVG 1.1的圓的半徑爲attribute，而不是一個CSS property。

CSS動畫爲CSS屬性添加了動畫效果，並且不需要動畫屬性。

這基本上是你的問題，所以你不會獲得CSS動畫來處理Firefox或Safari當前的屬性。如果您選擇了CSS屬性，例如不透明度，填充或筆畫，您會很好。

雖然SMIL動畫將對這些UA上的屬性（和CSS屬性）起作用。

<html> 
 
    <head> 
 
     <link href = "styling.css" rel = "stylesheet" type = "text/css"></link> 
 
    </head> 
 
    <body> 
 
     <svg class = "button" expanded = "true" height = "100px" width = "100px"> 
 
      <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/> 
 
      <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"> 
 
       <animate attributeName="r" begin="0s" dur="1s" repeatCount="indefinite" from="5%" to="25%"/> 
 
      </circle> 
 
     </svg> 
 
    </body> 
 
</html>

有思想爲即將到來的未完成的SVG 2.0規範在地平線上的解決方案表明，大多數屬性成爲CSS屬性（主要是因爲用例像你這樣不工作）。 Chrome已經實現了這一點，以檢查它是否可能是您的動畫在那裏運行的原因。在未來的某個時候，Firefox和Safari也可能實現這個SVG 2功能。

來源

2015-09-05 06:54:15

「SVG的SMIL動畫（，等）已被取消，將被刪除，請使用CSS動畫或Web動畫來代替。」我的控制檯 – krummens

@ krummens據推測，未來的Chrome更新會在他們改變主意時刪除該棄用警告。 –

認真嗎？我做了很多關於不能使用的想法，而且這很糟糕。所以我做了所有這些都沒有？ – krummens

有一個簡單的選擇：動畫元素縮放而不是圓半徑。

由於傳統原因，SMIL動畫已被棄用且僅由瀏覽器支持。它可能在將來被丟棄，並且永遠不會出現在Edge或未來的某些瀏覽器中。

@keyframes buttonTransition { 
 
    from { 
 
     transform: scale(0.2); 
 
    } 
 
    to { 
 
     transform: scale(1); 
 
    } 
 
} 
 

 
.innerCircle { 
 
    animation-duration: 1s; 
 
    animation-iteration-count: infinite; 
 
    animation-name: buttonTransition; 
 
    transform-origin: center center; 
 
}

<html> 
 
    <head> 
 
     <link href = "styling.css" rel = "stylesheet" type = "text/css"></link> 
 
    </head> 
 
    <body> 
 
     <svg class = "button" expanded = "true" height = "100px" width = "100px"> 
 
      <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/> 
 
      <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/> 
 
     </svg> 
 
    </body> 
 
</html>

來源

2017-01-04 17:46:23 Evgeny

SMIL動畫可能會被棄用，但至少有一個適用於IE的polyfill。我知道IE中沒有CSS動畫的polyfill。 –

@RobertLongson這是2017年。誰在乎IE？ Edge很快就會超過它的聲望。此外，CSS動畫是IE10 +，目前還沒有人支持11以下的IE。 – Evgeny

IE的任何版本都不支持SVG元素上的CSS轉換，並且根據[this]（https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6820655-add-css-transforms-on- svg-elements），它在Edge中也不受支持。 –

如果有人還在尋找到如何做到這一點，我發現了一個實心圓一個很好的解決方案，而無需使用SMIL。這個解決方案有點破解，它只適用於有固體填充的圓圈。基本上我所做的就是將這些圓圈的筆畫寬度設置爲動畫效果，使其看起來好像在不斷增長。

我原來的圈子

<circle cx="46" cy="46" r="2.8"/>

對於這個工作我設置了圓的半徑是接近接近0。

<circle cx="46" cy="46" r="0.01"/>

然後設置筆劃寬度是原始半徑的量的兩倍，最後設置的筆劃寬度的動畫。

@keyframes circle_animation { 
    from { 
     stroke-width: 0; 
    } 
} 

circle { 
    stroke-width: 5.6; 
    animation: circle_animation .5s linear infinite; 
}

來源

2017-01-21 23:03:54

使用CSS動畫調整SVG圓半徑的大小

回答

相關問題