使用 CSS 動畫調整 SVG 圓半徑

Question

我正在嘗試使用 CSS 為 SVG 圓的半徑屬性設置動畫。 雖然（使用 Firefox Inspect Element 工具）我可以看到動畫本身設置並正確運行，但“.innerCircle”的大小並沒有明顯變化。

如果您能發現我明顯遺漏的任何內容，或以任何方式提供幫助，我將不勝感激。 我對此很陌生，所以如果我做錯了，請善待！

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

再次感謝。

 @keyframes buttonTransition { from { r: 5%; } to { r: 25%; } } .innerCircle { animation-duration: 1s; animation-iteration-count: infinite; animation-name: buttonTransition; }

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

Answer 1

在 SVG 1.1 中，圓的半徑是一個屬性而不是CSS 屬性。 SVG 2 改變了這一點，而是使圓的半徑成為映射到屬性的 CSS 屬性。

CSS 動畫為 CSS 屬性設置動畫，但不為屬性設置動畫。

Firefox 現在已經實現了 SVG 2 規范的這一部分，因此問題中的測試用例現在可以工作，盡管在編寫問題時沒有。

SMIL 動畫將適用於屬性（和 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>

Answer 2

有一個簡單的替代方法：動畫元素比例而不是圓半徑。 截至 2018 年，Edge 和所有現代瀏覽器都支持它。

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>

Answer 3

如果有人仍在研究如何做到這一點，我找到了一個很好的解決方案，不使用 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;
}

Answer 4

由於某些瀏覽器版本和SVG2支持，OP 查詢現在開箱即用。

從 SVG2 開始， cx 、 cy和r是幾何屬性，這意味着這些屬性也可以用作該元素的 CSS 屬性。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

https://svgwg.org/svg2-draft/styling.html#TermPresentationAttribute

這是從 css 定義所有幾何體的同一個演示。 應用相同的級聯規則，如果聲明了 html 屬性，它將覆蓋style屬性中的style ，如果在style屬性中聲明了規則，則覆蓋class規則。

 @keyframes buttonTransition { from { r: 5%; } to { r: 25%; } } .button { width: 30%; height: auto } .outterCircle { cx: 50%; cy: 50%; r: 35%; stroke: #000000; stroke-width: 10%; fill: none } .innerCircle { cx: 50%; cy: 50%; r: 25%; fill: #000000; animation-duration: 1s; animation-iteration-count: infinite; animation-name: buttonTransition }

 <svg class="button"> <circle class="outterCircle"/> <circle class="innerCircle"/> </svg>

使用 CSS 動畫調整 SVG 圓半徑

問題描述

4 個解決方案

解決方案1
12 已采納 2015-09-05 06:54:15

解決方案2
9 2017-01-04 17:46:23

解決方案3
2 2017-01-21 23:03:54

解決方案4
2 2020-10-08 17:38:56

使用 CSS 動畫調整 SVG 圓半徑

問題描述

4 個解決方案

解決方案1 12 已采納 2015-09-05 06:54:15

解決方案2 9 2017-01-04 17:46:23

解決方案3 2 2017-01-21 23:03:54

解決方案4 2 2020-10-08 17:38:56

解決方案1
12 已采納 2015-09-05 06:54:15

解決方案2
9 2017-01-04 17:46:23

解決方案3
2 2017-01-21 23:03:54

解決方案4
2 2020-10-08 17:38:56