polyline fill

I would like to animate the red line so that it will progressively fill in a new colour.

by codecowboy

HTML

<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css">
<script src="http://keith-wood.name/js/jquery.svg.js"></script>
<script src="http://keith-wood.name/js/jquery.svganim.js"></script>
<div id="map" style="height:400px; width:500px"></div>

JavaScript

var map = new L.Map('map');

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/df9e2fac3c8842108b246c63cb309b81/997/256/{z}/{x}/{y}.png',
    cloudmadeAttrib = 'Made by me in a rub-a-dub-stylee',
    cloudmade = new L.TileLayer(cloudmadeUrl, {
        maxZoom: 18,
        attribution: cloudmadeAttrib
    });

var london = new L.LatLng(51.505, -0.09); // geographical point (longitude and latitude)
map.addLayer(cloudmade);


var cairo = new L.LatLng(30, 31);
var losangeles = new L.LatLng(34, -118);
var newyork = new L.LatLng(40, -74);
var vancouver = new L.LatLng(49, -123);

var latlngs = [london, cairo, losangeles, newyork];

var p1 = [london, cairo];
var p2 = [cairo, vancouver];
var p3 = [vancouver, losangeles];
var p4 = [losangeles, london];

var test = [p1, p2, p3, p4];
// create a red polyline from an arrays of LatLng points
var mpolyline = new L.MultiPolyline(test, {
    color: 'red',
    id:'poly1'
});


// zoom the map to the polyline
map.fitBounds(new L.LatLngBounds(latlngs));

// add the polyline to the map
map.addLayer(mpolyline);


$('.leaflet-overlay-pane').svg({onLoad: function(svg) { 
    console.log($(svg));
    
}});