从左到右用SVG填充颜色

Question

在悬停时，我的徽标具有一种效果，悬停时会填充不同的路径。

无论如何，我想要的（如果可以的话哈哈）是将其从左到右填充（由悬停触发）。

在这里真的很感激！

这里是使它变得更容易的小提琴。

https://jsfiddle.net/r3h1smag/1/

svg path{
  transition:.2s
  }
svg:hover path{
  fill:#fff
}

非常感谢， 杰克