SVG 动画在 IE 和 Edge 上出现 "out of bounds"

Question

我遇到的问题似乎只影响 IE 和 Edge（已在 IE9-11 和 Edge 12-13 上测试）。我正在使用 Snap.svg 为 SVG 笔画偏移设置动画，这似乎运行很好，但在某些点笔画似乎会 "out of bounds" 并消失。这很奇怪，因为 viewBox 设置为清楚地适合线条（它是直接从 Illustrator 导出的，带有适合整条线条的画板）。

您可以在此处查看实际效果：http://codepen.io/ndimatteo/full/zqLBVW/

// SSSSSNAKE
var snake = Snap('#snake-preview svg');
var bodyPath = snake.select('#snake-body');

var bodyPathBreakfast = snake.select('#snake-body-breakfast');
var bodyPathLunch = snake.select('#snake-body-lunch');
var bodyPathDinner = snake.select('#snake-body-dinner');

var headPath = snake.select('#snake-head');

// Draw Path
var bodyLength = bodyPath.getTotalLength();
var headLength = headPath.getTotalLength();

function snakeAnim() {

  //reset food
  setTimeout(function() {
    $('#snake-body-dinner').hide();
    snake.animate({ opacity: 1}, 200);
    $('#food-1').show();
  }, 1000);

  // breakfast
  setTimeout( function() {
    $('#food-1').hide();
    $('#food-2, #snake-body-breakfast').show();
  }, 2000);
  
  // lunch
  setTimeout( function() {
    $('#food-2, #snake-body-breakfast').hide();
    $('#food-3, #snake-body-lunch').show();
  }, 7000);

  // dinner
  setTimeout( function() {
    $('#food-3, #snake-body-lunch').hide();
    $('#snake-body-dinner').show();
  }, 12800);

  // death
  setTimeout( function() {
    snake.animate({ opacity: 0}, 200, snakeAnim);
  }, 14800);

  // give it a head
  headPath.attr({
    "stroke-dasharray": 1 + ' ' + headLength,
    "stroke-dashoffset": 0
  }).animate({
    "stroke-dashoffset": -headLength
  }, 15000, mina.linear);

  // breakfast bite
  bodyPathBreakfast.attr({
    "stroke-dasharray": 250 + ' ' + (bodyLength-250),
    "stroke-dashoffset": 250
  }).animate({
    "stroke-dashoffset": -bodyLength+250
  }, 15000, mina.linear);

  // lunch bite
  bodyPathLunch.attr({
    "stroke-dasharray": 300 + ' ' + (bodyLength-300),
    "stroke-dashoffset": 300
  }).animate({
    "stroke-dashoffset": -bodyLength+300
  }, 15000, mina.linear);

  // dinner bite
  bodyPathDinner.attr({
    "stroke-dasharray": 350 + ' ' + (bodyLength-350),
    "stroke-dashoffset": 350
  }).animate({
    "stroke-dashoffset": -bodyLength+350
  }, 15000, mina.linear);
  
  // hungry snake
  bodyPath.attr({
    "stroke-dasharray": 200 + ' ' + (bodyLength-200),
    "stroke-dashoffset": 200
  }).animate({
    "stroke-dashoffset": -bodyLength+200
  }, 15000, mina.linear);
}

snakeAnim();

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #fcd835;
  text-align: center;
  height: 100%;
}

#snake-preview {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-top: 50%;
  top: 50%;
  transform: translateY(-50%);
}
#snake-preview svg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#snake-preview svg #food-1,
#snake-preview svg #food-2,
#snake-preview svg #food-3,
#snake-preview svg #snake-body-breakfast,
#snake-preview svg #snake-body-lunch,
#snake-preview svg #snake-body-dinner {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="snake-preview">
  <svg viewBox="0 0 800 400"><rect x="313.91" y="230.68" width="14.14" height="14.14" transform="translate(-74.1 296.61) rotate(-45)" fill="#304fff" id="food-1"/><rect x="547.1" y="116.93" width="14.14" height="14.14" transform="translate(74.63 428.17) rotate(-45)" fill="#304fff" id="food-2"/><rect x="423.93" y="262.93" width="14.14" height="14.14" transform="translate(-64.68 383.84) rotate(-45)" fill="#304fff" id="food-3"/><path d="M0 164.25 320.98 164.25 320.98 237.75 424.16 237.75 424.16 191.25 494.98 191.25 494.98 68.26 524.52 68.26 524.52 291.74 647.98 291.74 647.98 124 386 124 386 322 242 322 242 79 431 79 431 322 800 322" fill="none" stroke="#ff1644" stroke-miterlimit="10" stroke-width="20" id="snake-body"/><path d="M0 164.25 320.98 164.25 320.98 237.75 424.16 237.75 424.16 191.25 494.98 191.25 494.98 68.26 524.52 68.26 524.52 291.74 647.98 291.74 647.98 124 386 124 386 322 242 322 242 79 431 79 431 322 800 322" fill="none" stroke="#ff1644" stroke-miterlimit="10" stroke-width="20" id="snake-body-breakfast"/><path d="M0 164.25 320.98 164.25 320.98 237.75 424.16 237.75 424.16 191.25 494.98 191.25 494.98 68.26 524.52 68.26 524.52 291.74 647.98 291.74 647.98 124 386 124 386 322 242 322 242 79 431 79 431 322 800 322" fill="none" stroke="#ff1644" stroke-miterlimit="10" stroke-width="20" id="snake-body-lunch"/><path d="M0 164.25 320.98 164.25 320.98 237.75 424.16 237.75 424.16 191.25 494.98 191.25 494.98 68.26 524.52 68.26 524.52 291.74 647.98 291.74 647.98 124 386 124 386 322 242 322 242 79 431 79 431 322 800 322" fill="none" stroke="#ff1644" stroke-miterlimit="10" stroke-width="20" id="snake-body-dinner"/><path d="M0 164.25 320.98 164.25 320.98 237.75 424.16 237.75 424.16 191.25 494.98 191.25 494.98 68.26 524.52 68.26 524.52 291.74 647.98 291.74 647.98 124 386 124 386 322 242 322 242 79 431 79 431 322 800 322" fill="none" stroke="#ffffff" stroke-miterlimit="10" stroke-width="20" stroke-dasharray="1 2000" stroke-linecap="round" id="snake-head"/></svg>
  </div>

Answer 1

我有 reach good result IE11 接下来的两个更改。

添加到 SVG 标签版本和样式：

<svg 
    viewBox="0 0 800 400"  
    version="1.1"
    style="
        shape-rendering:auto; 
        text-rendering:auto; 
        image-rendering:auto; 
        fill-rule:evenodd; 
        clip-rule:evenodd"
>

并且在 IE 中启用模拟 Edge 模式:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

但是通过将此字段添加到 (codepen.io) /Settings/HTML/Stuff to <head>/ 头部没有变化，所以我已通过 F12/Document mode/Edge 启用此模式（不要忘记按 F5）。

希望对您有所帮助。

SVG 动画在 IE 和 Edge 上出现 "out of bounds"

SVG animation appears "out of bounds" on IE & Edge

javascript

svg

snap.svg