SVG animacji pojawi się „poza zakresem” na IE & kant

Mam problem, który pojawia się tylko wpływać na IE i krawędzi (testowane na IE9-11 & Edge, 12-13). Mam animacji SVG suwie offsetu z Snap.svg który wydaje się działać prawidłowo, ale w niektórych punktach skok wydaje się iść „poza zakresem” i znikają. To dziwne, ponieważ viewBox jest ustawiony tak, by wyraźnie pasował do linii (został wyeksportowany bezpośrednio z programu Illustrator z obszarem roboczym, który pasuje do całej linii).SVG animacji pojawi się „poza zakresem” na IE & kant

Można to zobaczyć w akcji tutaj: 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>

Źródło

2016-04-25 ndimatteo

na uwadze technicznej, nie trać czasu na IE9 i IE10 - Microsoft odstawić je na 12 stycznia tego roku, z wyjątkiem użytkowników Vista SP2, którzy mogą korzystać tylko IE9 i może nadal być objęte rozszerzonym operacyjne MS za; ale tylko wtedy, gdy są biznesem, a nie zwykłymi ludźmi w domu (i jestem prawie pewien, że nie kierujesz tu działalności). Nowa polityka MS to „my tylko wspierać najnowszej wersji IE” więc to IE11, a po ziemiach Edge IE11 zgaśnie wsparcia, too. –

Dzięki Mike, całkowicie się zgadzam. Nie jestem zbytnio zainteresowany IE10, jednak zarówno w IE11, jak i w najnowszych wersjach Edge wydaje się, że jest to problem, więc myślę, że warto go zaadresować, ponieważ prawdopodobnie będzie to ciągły błąd w najnowszej, gnijącej przeglądarce Microsoft. uwolnienia, haha. – ndimatteo

Pamiętaj, że jeśli jest to błąd, MS przeszło znaczną zmianę odkąd Ballmer został wyrzucony, więc możesz go złożyć na swoim * publicznym monitorze * wydania na https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/te dni (co jest niesamowite) –

mam reach good result z IE11 przez najbliższych dwóch zmian.

Dodaj do SVG wersji tag i styl:

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

I włączyć w IE tryb emulacji krawędzi:

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

Ale dodając do tego pola (codepen.io) /Settings/HTML/Stuff to <head>/ żadne zmiany w głowie, więc muszę włączyć ten tryb przez F12/Document mode/Edge (nie zapomnij nacisnąć klawisz F5).

Mam nadzieję, że to pomoże.

Źródło

2016-04-28 17:14:08 imbearr

Dzięki! Wygląda na to, że działa całkiem dobrze, z wyjątkiem najnowszej wersji Edge (Edge 13). Wydaje się dziwne, ponieważ starsze wersje Edge i IE10-11 działają. Masz pomysł, dlaczego wciąż jest przycięty w Edge 13? – ndimatteo

Nie mam pojęcia ... Kilka przykładów [zgłoszeń błędów] (https://connect.microsoft.com/PL/Feedback/Details/1571965) o przeglądarkach Microsoftu i renderowaniu svg, ale z nowymi aktualizacjami otrzymaliśmy nowe błędy od ta wściekła firma. Sztuczka z wersją i stylem, którą otrzymałem z svg stworzonego przez CorelDraw (jako dobre podejście). W skali globalnej wszystkie próby naprawienia tego procesu to magia i hoodoo. – imbearr

Właściwie to, po prostu przetestowane z nim w projekcie i działa teraz w Edge 13, musi mieć związek ze wspomnianym metatagiem! To jest idealne, bardzo dziękuję za to! – ndimatteo

SVG animacji pojawi się „poza zakresem” na IE & kant

Odpowiedz

Powiązane problemy