IE 中的 SVG 路径线动画

Question

我在页面上有一些路径动画，它们在除 IE10/11 之外的所有浏览器中都能正常工作。但是，我在其他页面上有一些更简单的动画在做同样的事情，只是数量更少，使用几乎相同的代码，而且看起来还不错。

我认为这很可能是性能瓶颈或与 IE 相关。

如果您在 IE10/11 中查看 http://codepen.io/jhealey5/pen/YXzbYY，您会发现有一个非常明显的问题，即 svg 出现故障或未完全呈现。不太清楚它是什么。

codepen的相关JS代码：

    var cfg = {
            easing: [0.165, 0.84, 0.44, 1],
            duration: 1200,
            delay: 500,
            layerDelay: 7000,
            width: 28,
            positioning: true,
            colors: [
                    '#027CA5',
                    '#75B5C6',
                    '#00FFD0',
                    '#00B994',
                    '#BEF5FE'
            ]
    }

    $('.shape-layer').each(function(i) {
            var $this = $(this);

            setTimeout(function() {
                    var $paths = $this.find('path');

                    strokeSetup($paths);
                    strokeOut($paths);

            }, cfg.layerDelay * i);
    });

    function strokeSetup($el) {
            $el.each(function(i) {
                    var $this = $(this),
                            pLen = Math.ceil($this.get(0).getTotalLength());

                    $this.css({
                            'stroke-dasharray': pLen,
                            'stroke-dashoffset': pLen,
                            'stroke-width': cfg.width
                    });
            });
    }

    function strokeOut($el) {
            var pathCount = $el.length,
                    iterationCount = pathCount;

            $el.each(function(i) {
                    var $this = $(this),
                            pLen = Math.ceil($this.get(0).getTotalLength()),
                            color = cfg.colors[getRandom(0, cfg.colors.length)];

                    setTimeout(function() {
                            $this.css({
                                    'stroke': color
                            });

                            if (cfg.positioning) {
                                    var side = ['top', 'bottom', 'left', 'right'],
                                            cssO = {};

                                    $this.parent().css({
                                            top: 'auto',
                                            bottom: 'auto',
                                            left: 'auto',
                                            right: 'auto'
                                    });

                                    cssO[side[getRandom(0, 1)]] = getRandom(0, 40) + '%';

                                    var firstPos = cssO[Object.keys(cssO)[0]],
                                            sideAmount = (parseInt(firstPos) < 20) ? 100 : 20;

                                    cssO[side[getRandom(2, 3)]] = getRandom(0, sideAmount) + '%';

                                    $this.parent().css(cssO);
                            }

                            $this.velocity({
                                    'stroke-dashoffset': 0,
                            }, {
                                    duration: cfg.duration,
                                    easing: cfg.easing
                            });

                            if (!--iterationCount) {
                                    strokeIn($el);
                            }
                    }, cfg.delay * i);
            });

    }

    function strokeIn($el) {
            var pathCount = $el.length,
                    iterationCount = pathCount;

            $el.each(function(i) {
                    var $this = $(this),
                            pLen = Math.ceil($this.get(0).getTotalLength());

                    setTimeout(function() {

                            $this.velocity({
                                    'stroke-dashoffset': pLen
                            }, {
                                    duration: cfg.duration,
                                    easing: cfg.easing
                            });

                            if (!--iterationCount) {
                                    strokeOut($el);
                            }
                    }, cfg.delay * i);
            });
    }

    function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
    }

Answer 1

您可能知道这一点，但所有 Internet Explorer 版本不支持SMIL 动画路径/笔划等是SMIL。甚至通过 JavaScript。并且 jQuery 与 SVG DOM 不完全兼容。尽管这种操作是通过 CSS SVG 属性进行的，但通过 CSS 实现的 SVG“动画”并不理想。

SMIL 正在消亡并且将被贬值，这就是为什么我建议花更多时间使用诸如 Snap.svg (ie9+) 或 Raphaël之类的库> (ie6+)，我个人会更倾向于 Snap。

你制作的这个动画怎么样？

从明智的专业角度来看，这不是渐进增强的场景。这意味着您应该通过将 SVG 动画转换为视频、gif 或静态图像并将其用作 IE 浏览器的故障恢复来进行补偿。例如通过 modernizr 或其他方式。

每个浏览器中的所有内容都必须看起来相同，这是完全错误的。我相信对于那些在这种情况下缺乏功能的人来说，静态 jpg 图像就足够了。

我一直都知道的另一件事是，对于 SVG，Internet Explorer 已经“破坏”了 IE 版本链的兼容性。