在IE＆Edge上，SVG動畫顯得“超出界限”

Question

我遇到的問題似乎只影響IE和Edge（在IE9-11和Edge 12-13上測試過）。 我正在使用Snap.svg設置一個SVG筆划偏移的動畫，它看起來運行正常，但在某些點上，筆划似乎“超出界限”並消失。 這是奇怪的，因為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

接下來的兩次更改，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中模擬邊緣模式啟用 ：

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

但是通過將此字段添加到（codepen.io） /Settings/HTML/Stuff to <head>/沒有變化，所以我通過F12/Document mode/Edge啟用此模式（別忘了按F5）。

我希望這能幫到您。