The following code targets svg paths drawn by leaflet maps. However, on IE <= 8, leaflet falls back to VML to draw polylines. How can I adapt this code to target both VML and SVG?
(function ($) {
// Thank you, Pythagoras :) http://abstrusegoose.com/376
function calculateDistance(s, e) {
return Math.sqrt(
Math.pow(Math.abs(s.x-e.x), 2) +
Math.pow(Math.abs(s.y-e.y), 2)
);
}
// Call on a set of paths nodes that express lines
$.fn.animateLines = function (duration) {
if (duration == null) duration = 3000;
var uid = 'animateLinesTrigger' + new Date().getTime().toString();
var common = this.eq(0).closest('svg');
var totalDistance = 0;
// first pass calculates all the distances and prepares animations
this.each(function () {
var path = $(this);
var d = path.attr('d').match(/[-0-9.]+/g);
var s = { x: parseFloat(d[0]), y: parseFloat(d[1]) },
e = { x: parseFloat(d[2]), y: parseFloat(d[3]) };
var distance = calculateDistance(s, e);
totalDistance += distance;
path.attr('d', 'M'+s.x+' '+s.y+'L'+s.x+' '+s.y);
path.data(uid+'Distance', distance);
path.data(uid, function (segmentDuration) {
common.queue(function (nextInQueue) {
path.animate({ segmentProgress: 1 }, {
step: function (now, fx) {
var x = s.x + (e.x-s.x)*now;
var y = s.y + (e.y-s.y)*now;
path.attr('d', 'M'+s.x+' '+s.y+'L'+x+' '+y);
},
complete: function () {
nextInQueue();
},
duration: segmentDuration,
ease: 'linear'
});
});
});
});
// second pass triggers all the animation queueing
this.each(function () {
var distance = $(this).data(uid + 'Distance');
($(this).data(uid))(Math.floor(duration * distance/totalDistance));
$(this).data(uid, null);
});
return this;
};
})(jQuery);
// $('path[stroke=#000000]').hide();
$('path[stroke=red]').animateLines();
The following is an example of the VML generated by leaflet:
<lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M268 296L157 212 "></lvml:path><lvml:stroke class=lvml opacity="0.2" endcap="round" weight="3px" color="#000000"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M157 212L220 201 "></lvml:path><lvml:stroke class=lvml opacity="0.2" endcap="round" weight="3px" color="#000000"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M220 201L325 177 "></lvml:path><lvml:stroke class=lvml opacity="0.2" endcap="round" weight="3px" color="#000000"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M325 177L540 314 "></lvml:path><lvml:stroke class=lvml opacity="0.2" endcap="round" weight="3px" color="#000000"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M540 314L524 209 "></lvml:path><lvml:stroke class=lvml opacity="0.2" endcap="round" weight="3px" color="#000000"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M268 296L157 212 "></lvml:path><lvml:stroke class=lvml opacity="0.8" endcap="round" weight="3px" color="red"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M157 212L220 201 "></lvml:path><lvml:stroke class=lvml opacity="0.8" endcap="round" weight="3px" color="red"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M220 201L325 177 "></lvml:path><lvml:stroke class=lvml opacity="0.8" endcap="round" weight="3px" color="red"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M325 177L414 234 "></lvml:path><lvml:stroke class=lvml opacity="0.8" endcap="round" weight="3px" color="red"></lvml:stroke></lvml:shape>
The original code is on jsfiddle