SVG-Animation erscheint auf IE & Edge "außerhalb der Grenzen"

Ich habe ein Problem, das nur IE und Edge betrifft (getestet auf IE9-11 & Edge 12-13). Ich animiere einen SVG-Strich-Versatz mit Snap.svg, der gut zu laufen scheint, aber an bestimmten Punkten scheint der Strich "außerhalb der Grenzen" zu liegen und zu verschwinden. Es ist seltsam, da die ViewBox so eingestellt ist, dass sie eindeutig zur Linie passt (sie wurde direkt aus Illustrator mit einer Zeichenfläche exportiert, die auf die gesamte Linie passt).SVG-Animation erscheint auf IE & Edge "außerhalb der Grenzen"

Sie können dies hier in Aktion sehen: 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>

Quelle

2016-04-25 ndimatteo

auf eine technische Anmerkung, verschwenden Sie keine Zeit auf IE9 und IE10 - Microsoft hat sie am 12. Januar dieses Jahres eingestellt, mit Ausnahme von Vista SP2-Benutzer, die nur IE9 verwenden können und möglicherweise weiterhin unter MS erweiterte Unterstützung abgedeckt sind; aber nur, wenn sie ein Geschäft sind, nicht normale Leute zu Hause (und ich bin mir ziemlich sicher, dass Sie hier nicht auf Unternehmen abzielen). Die neue MS-Richtlinie lautet "Wir unterstützen nur die neueste Version von IE", also IE11, und sobald Edge landet, wird auch IE11 nicht mehr unterstützt. –

Danke Mike, stimme ich voll und ganz zu. Ich bin nicht sehr besorgt über IE10, aber sowohl in IE11 als auch in den neuesten Versionen von Edge scheint das Problem ebenfalls zu haben, also denke ich, dass es sich lohnt, zu adressieren, da es wahrscheinlich ein fortgesetzter Fehler in dem letzten beschissenen Browser Microsoft sein wird Releases, haha. – ndimatteo

Wohlgemerkt, wenn es sich um einen Fehler handelt, hat sich MS ziemlich verändert, seit Ballmer rausgeschmissen wurde, also können Sie es auf ihrem * öffentlichen Issue-Tracker * über https://developer.microsoft.com/en-us ablegen/microsoft-edge/plattform/issues/diese Tage (was super ist) –

I reach good result mit IE11 haben neben von beiden Änderungen.

In der SVG-Tag-Version und Stil:

<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" 
>

Und ermöglichen in IE Edge-Modus emuliert:

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

Aber durch dieses Feld Hinzufügen zu (codepen.io) /Settings/HTML/Stuff to <head>/ keine Änderungen im Kopf, also habe ich diesen Modus durch F12/Document mode/Edge aktivieren (nicht vergessen, F5 zu drücken).

Ich hoffe, das wird Ihnen helfen.

Quelle

2016-04-28 17:14:08 imbearr

Danke! Dies scheint tatsächlich ziemlich gut zu funktionieren, außer auf der neuesten Version von Edge (Edge 13). Es scheint seltsam, da die ältere Version von Edge und IE10-11 alle funktionieren. Irgendeine Idee, warum es immer noch in Edge 13 abgeschnitten ist? – ndimatteo

Ich habe keine Ahnung ... Existieren einige [Fehlerberichte] (https://connect.microsoft.com/IE/Feedback/Details/1571965) über Microsofts Browser und Svg-Rendering, aber mit neuen Updates haben wir neue Bugs von diese wütende Firma. Trick mit Version und Stil Ich habe von Svg erstellt von CorelDraw (als guter Ansatz). In der ganzen Welt sind alle Versuche, diesen Prozess zu beheben, Magie und Hoodoo. – imbearr

Eigentlich gerade mit ihm im Projekt getestet und es funktioniert jetzt in Edge 13, muss mit dem von Ihnen erwähnten Meta-Tag zu tun haben! Das ist perfekt, vielen Dank dafür! – ndimatteo

SVG-Animation erscheint auf IE & Edge "außerhalb der Grenzen"

Antwort

Verwandte Themen