SVG stroke animation in IE when stroke-width is gr

Question

I have a bizarre problem with animating stroke paths in IE when the stroke is greater than 1px wide. I'm using the following script (not created by me):

//inspired by http://product.voxmedia.com/post/68085482982/polygon-feature-design-svg-animations-for-fun-and


//If you want to add SVG to the DOM, jQuery won't do
//http://www.benknowscode.com/2012/09/using-svg-elements-with-jquery_6812.html

function SVG(tag) {
return document.createElementNS('http://www.w3.org/2000/svg', tag);
}

function replaceRectsWithPaths(parentElement) {

var rects = $(parentElement).find('rect');

$.each(rects, function() {

    var rectX = $(this).attr('x');
    var rectY = $(this).attr('y');

    var rectX2 = parseFloat(rectX) + parseFloat($(this).attr('width'));
    var rectY2 = parseFloat(rectY) + parseFloat($(this).attr('height'));

    var convertedPath = 'M' + rectX + ',' + rectY + ' ' + rectX2 + ',' + rectY + ' ' + rectX2 + ',' + rectY2 + ' ' + rectX + ',' + rectY2 + ' ' + rectX + ',' + rectY;


    $(SVG('path'))
    .attr('d', convertedPath)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);

});

$(rects).remove();
}

function replaceLinesWithPaths(parentElement) {

var lines = $(parentElement).find('line');

$.each(lines, function() {

    var lineX1 = $(this).attr('x1');
    var lineY1 = $(this).attr('y1');

    var lineX2 = $(this).attr('x2');
    var lineY2 = $(this).attr('y2');

    var convertedPath = 'M' + lineX1 + ',' + lineY1 + ' ' + lineX2 + ',' + lineY2;


    $(SVG('path'))
    .attr('d', convertedPath)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);

});

$(lines).remove();
}

function replaceCirclesWithPaths(parentElement) {

var circles = $(parentElement).find('circle');

$.each(circles, function() {

    var cX = $(this).attr('cx');
    var cY = $(this).attr('cy');
    var r = $(this).attr('r');
    var r2 = parseFloat(r * 2);

    var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-r) + ', 0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + r2 + ',0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + (-r2) + ',0 ';

    $(SVG('path'))
    .attr('d', convertedPath)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);

});

$(circles).remove();
}

function replaceEllipsesWithPaths(parentElement) {


var ellipses = $(parentElement).find('ellipse');

$.each(ellipses, function() {

    var cX = $(this).attr('cx');
    var cY = $(this).attr('cy');
    var rX = $(this).attr('rx');
    var rY = $(this).attr('ry');

    var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-rX) + ', 0 ' + 'a ' + rX + ', ' + rY + ' 0 1,0 ' + rX*2 + ',0 ' + 'a ' + rX + ', ' + rY + ' 0 1,0 ' + (-rX*2) + ',0 ';

    $(SVG('path'))
    .attr('d', convertedPath)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);

});

$(ellipses).remove();
}

function replacePolygonsWithPaths(parentElement) {


var polygons = $(parentElement).find('polygon');

$.each(polygons, function() {

    var points = $(this).attr('points');
    var polyPoints = points.split(/[ ,]+/);
    var endPoint = polyPoints[0] + ', ' + polyPoints[1];

    $(SVG('path'))
    .attr('d', 'M' + points + ' ' + endPoint)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);

});

$(polygons).remove();
}

function replacePolylinesWithPaths(parentElement) {

var polylines = $(parentElement).find('polyline');

$.each(polylines, function() {

    var points = $(this).attr('points');

    $(SVG('path'))
    .attr('d', 'M' + points)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);

});

$(polylines).remove();
}

function hideSVGPaths(parentElement) {

var paths = $(parentElement).find('path');

//for each PATH..
$.each( paths, function() {

    //get the total length
    var totalLength = this.getTotalLength();

    //set PATHs to invisible
    $(this).css({
        'stroke-dashoffset': totalLength,
        'stroke-dasharray': totalLength + ' ' + totalLength
    });
});
}

function drawSVGPaths(_parentElement, _timeMin, _timeMax, _timeDelay) {

var paths = $(_parentElement).find('path');

//for each PATH..
$.each( paths, function(i) {

    //get the total length
    var totalLength = this.getTotalLength();


    //set PATHs to invisible
    $(this).css({
        'stroke-dashoffset': totalLength,
        'stroke-dasharray': totalLength + ' ' + totalLength
    });

    //animate
    $(this).delay(_timeDelay*i).animate({
        'stroke-dashoffset': 0
    }, {
        duration: Math.floor(Math.random() * _timeMax) + _timeMin
        ,easing: 'easeInOutQuad'
    });
});
}

function replaceWithPaths(parentElement) {

replaceRectsWithPaths(parentElement);
replaceLinesWithPaths(parentElement);
replaceEllipsesWithPaths(parentElement);
replaceCirclesWithPaths(parentElement);
replacePolygonsWithPaths(parentElement);
replacePolylinesWithPaths(parentElement);    
}

function startSVGAnimation(parentElement){   
drawSVGPaths(parentElement, 100, 300, 200);
TweenLite.to(".svgWork", 1, {attr:{"fill-opacity":1}}).delay(1);
TweenLite.to(".svgServices", 1, {attr:{"fill-opacity":1}}).delay(1.5);
TweenLite.to(".svgCalc", 1, {attr:{"fill-opacity":1}}).delay(2);
TweenLite.to(".svgTeam", 1, {attr:{"fill-opacity":1}}).delay(1);
TweenLite.to(".svgWorkforus", 1, {attr:{"fill-opacity":1}}).delay(1.5);
}

$(function() {

//if (!Modernizr.touch) {

    var animated = $('.js-animate');
    replaceWithPaths(animated);
    hideSVGPaths(animated);
    $(document).scroll(function() {

        $(animated).each(function(i) {
            if( $(this).visible() ) {
                startSVGAnimation(this);
                animated.splice(i,1);
            };
        });

    });

    $(document).scroll();
//};

});

http://codepen.io/niorad/pen/xmfza

As you can see it works fine in IE (and other browsers). Having implemented it on my site and applied it to an SVG with a stroke-width of greater than 1, the SVG does not draw properly in IE. Example here: http://upright.cloudlevel.me/

If I reduce it down to a basic SVG circle without anything else e.g.

circle fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" cx="115.5" cy="119.5" r="55.5"

I can increase the stroke-width to 6 before it breaks.

What can I do to fix / get around this issue? At this point the best I have come up with is to include some browser detection to disable animation in IE, but this of course would be far from ideal.

Answer 1

I also met the same problem, I found it render error when stroke-width greater than 6. I suspect it is IE's bug on rendering svg.

When I drawing a SVG path animation with clip-path, I have to use the below code.

var ua = navigator.userAgent.toLowerCase();
if(/msie/.test(ua) || /rv:[\d.]+\) like gecko/.test(ua)){
    e.setAttributeNS(null, 'stroke-width', '6');
} else {
    e.setAttributeNS(null, 'stroke-width', '15');
}