当笔划宽度大于 1 时，IE 中的 SVG 笔划动画

Question

当笔画宽度大于 1 像素时，我在 IE 中为笔画路径设置动画时遇到了一个奇怪的问题。我正在使用以下脚本（不是我创建的）：

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

如您所见，它在 IE（和其他浏览器）中运行良好。在我的网站上实现它并将其应用于笔画宽度大于 1 的 SVG 后，SVG 无法在 IE 中正确绘制。这里的例子： http://upright.cloudlevel.me/

如果我将它缩减为一个基本的 SVG 圆圈而没有其他任何东西，例如

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

我可以在笔划宽度中断之前将其增加到 6。

我可以做些什么来解决/解决这个问题？在这一点上，我想出的最好办法是在 IE 中包含一些浏览器检测来禁用动画，但这当然远非理想。

Answer 1

我也遇到了同样的问题，我发现stroke-width大于6时渲染错误。我怀疑是IE渲染svg的bug。

当我使用 clip-path 绘制 SVG 路径动画时，我必须使用下面的代码。

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');
}