IE中的SVG路径线动画

Question

IE中的SVG路径线动画

javascriptjqueryinternet-explorersvg

3

我在网页上有一些路径动画，它们在除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;
    }

- evu

这个在IE上的表现看起来像是重新绘制错误。看起来 IE 没有正确计算重绘区域。也许这与你复杂的超时重叠安排有关。你可以通过只在IE上运行一个破折号偏移动画来解决问题。 - Paul LeBeau

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- frontsideup · Accepted Answer

您可能已经知道，所有版本的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在不同版本中“破坏”了兼容性。