SVG Path Line Animation в IE

Question

У меня есть анимация пути на странице, и они отлично работают во всех браузерах, кроме IE10/11. Однако у меня есть несколько более простые анимации, которые делают то же самое на других страницах, только с меньшим количеством из них, используя почти тот же код, и они выглядят хорошо.

Я думаю, что это может быть узким местом производительности, связанным с IE.

Если вы просматриваете http://codepen.io/jhealey5/pen/YXzbYY в IE10/11, вы увидите, что есть довольно заметная проблема, когда svgs кажутся glitchy или не полностью отображены. Не могу понять, что это такое.

Соответствующий JS код из codepen:

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, SVG «анимация» с помощью CSS не идеальна.

SMIL умирает & будет амортизироваться, поэтому я рекомендую проводить больше времени с LIBS как Snap.svg (ie9 +) или Рафаэле (IE6 +), лично я склоняюсь больше к оснастке.

В любом случае, как насчет этой анимации?

В ваших обстоятельствах с точки зрения профессионалов это не сценарий прогрессивного улучшения. Это означает, что вы должны скомпенсировать, превратив эту анимацию SVG в видео, gif или статическое изображение и используя его в качестве отката для браузеров IE. например через modernizr или что угодно.

Совершенно неправильно, что все должно выглядеть одинаково в каждом браузере. Я считаю, что статический jpg-образ достаточен для тех, кому не хватает функций в этом сценарии.

Другая вещь, о которой я всегда знаю, - это то, что в отношении SVG Internet Explorer «сломал» совместимость с цепочкой версий IE.