如何调整此 JavaScript 以针对 Internet Explorer 的 VML 对象？

Question

以下代码针对由传单地图绘制的 svg 路径。然而，在 IE <= 8 上，leaflet 会退回到 VML 来绘制折线。如何调整此代码以同时针对 VML 和 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();

以下是传单生成的VML示例：

<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>

原始代码位于jsfiddle