如何使用SVG填充这样的矢量图？

Question

如何填写这样的svg（任何形状）？

https://jsfiddle.net/6dou42qz/

我的期望：

1. 给出任何数字，例如50％或70％
2. 用两种颜色填充形状，以给定的速率分割。 （从左到右）
3. 可以动态更改填充率（动画更好）。

所需代码：

var $svg = $('#svg_id');
splitFill($svg, 0.5);
splitFill($svg. 0.7); // Animate from 50% to 70%