I'm having an issue that only appears to affect IE and Edge (tested on IE9-11 & Edge 12-13). I'm animating an SVG stroke offset with Snap.svg which seems to run fine but at certain points the stroke appears to go "out of bounds" and disappear. It's odd since the viewBox is set to clearly fit the line (it was exported directly from Illustrator with an artboard that fit the entire line).
You can see this in action here: 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>1 Answers
Answers 1
I have reach good result with IE11 by next both changes.
Add to SVG tag version and style:
<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" > And enable in IE emulating Edge mode:
<head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> But by adding this field to (codepen.io) /Settings/HTML/Stuff to <head>/ no changes in head, so I have enable this mode by F12/Document mode/Edge (don't forget to press F5).
I hope this will help you.
0 comments:
Post a Comment