SVG mask, what's wrong?

Question

css

Found, as it seems to me, a suitable variant of the animation of the filling of the figure. It is necessary that the road be like a progress bar (so that you can adjust the percentage of filling), gradually fill in exactly according to its shape. I can’t understand what the puncture is, I do it by analogy with a bottle of milk.

Answer 1

Something you mixed everything together. Why was it necessary to combine the bottle and the road into one SVG? Even the animation of the milk bottle is gone.
And it doesn't work for three reasons:
1. you have a "road" and a "path". Apparently by analogy with the "bottle" and "milk". But the bottle is only an outline, it is not a painted figure. And the road is already painted over, the white path will not be visible on it.
2. If you paint over the “path” not with white, but for example with black, then it will still not be visible. If you remove the mask attribute for it, then it becomes visible. This means that the mask is drawn crooked. How to fix it - I don't know, since your editor set negative coordinates, dimensions, rotation, translate, in short, I don't know where this triangle should begin and end. Just pick at random.
3. As a result, the effect will look bad. Since the road is not straight, and sometimes even turns back, and the animation will only remove transparency from left to right.