使用SVG和JS進行過渡

Question

我有一個我無法解決的問題。

我正在做一個菜單，我想要一個很酷的打開/關閉按鈕，所以我制作了一個SVG文件並使所有內容都變得漂亮。

.icon-grid {
  width: 50px;
  height: 50px;
  fill: #000;
  transition: all 1s ease;
}

https://jsfiddle.net/mateuszrybin/0n78dg30/按下按鈕。

問題是我無法使填充過渡在黑色和紅色之間起作用。 顏色會突然彈出。 它適用於輪換，但不適用於填充，有人有任何想法嗎？

Answer 1

您應該使用SVG DOM API。 有一個很好的教程在這里 。 只是通讀它。 一切都解釋得很好。