我遇到的问题似乎只影响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); …Run Code Online (Sandbox Code Playgroud)我正在寻找一个简单的解决方案来实现以下.缩略图不会被裁剪,但它们所在的容器将始终具有相同的高度/宽度.
这个想法是大于容器的图像会响应(即缩小),而小于容器的图像将"按原样"显示.
我遇到的问题有三个方面:
显然,如果只能用CSS完成它会很棒,但我知道可能需要javascript.如果是这种情况,我正在寻找一种轻量级解决方案,因为缩略图网格可能会变得非常冗长.
有什么想法吗?
