9
IEとEdge（IE9-11 & Edge 12-13でテスト済み）にのみ影響するように見える問題があります。 SVGのストロークオフセットをSnap.svgでアニメーション化していますが、スナップショットはうまく動いているようですが、ストロークが「範囲外」になって消えるように見えます。 viewBoxが線にはっきりとフィットするように設定されているので、奇妙です（Illustratorから線全体に収まるアートボードで直接エクスポートされています）。IEとEdgeでSVGアニメーションが「範囲外」に表示される
あなたはここにこの動作を確認することができます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>
テクニカルノートでは、IE9とIE10で時間を無駄にしないでください - Microsoftは今年の1月12日にそれらを中止しました。ただし、IE9のみを使用できるVista SP2ユーザーはMSの拡張サポートの対象です。ビジネスであれ、自宅にいる普通の人であれ（そして私はあなたがここでビジネスをターゲットにしていないと確信しています）。新しいMSの方針は「IEの最新リリースだけをサポートしている」IE11だから、Edgeが立ち上がるとIE11もサポート外になるというものだ。 –
ありがとうマイク、私は完全に同意します。私はIE10に関心がありませんが、IE11とEdgeの最新バージョンの両方で問題があるようですので、最新の厄介なブラウザであるMicrosoftリリース、ハハ。 – ndimatteo
バナーの場合、Ballmerが追い出されて以来、MSはかなりの変更を行っています。実際にはhttps://developer.microsoft.com/en-us/に公開されている* /マイクロソフトエッジ/プラットフォーム/問題/これらの日（これは素晴らしいです） –