小编ndi*_*teo的帖子

在IE&Edge上,SVG动画显得"超出界限"

我遇到的问题似乎只影响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)

javascript svg snap.svg

9
推荐指数
1
解决办法
366
查看次数

使用固定宽度和高度容器对齐和调整各种缩略图图像的大小

我正在寻找一个简单的解决方案来实现以下.缩略图不会被裁剪,但它们所在的容器将始终具有相同的高度/宽度.

这个想法是大于容器的图像会响应(即缩小),而小于容器的图像将"按原样"显示.

我遇到的问题有三个方面:

  1. 如何处理响应元素,因为我们需要考虑各种宽高比(即水平与垂直与方形)
  2. 如何在必要时进行垂直对齐
  3. 本机不大于其容器的图像不应该按比例放大

显然,如果只能用CSS完成它会很棒,但我知道可能需要javascript.如果是这种情况,我正在寻找一种轻量级解决方案,因为缩略图网格可能会变得非常冗长.

有什么想法吗?

变体缩略图大小对齐

html javascript css

3
推荐指数
1
解决办法
1637
查看次数

标签 统计

javascript ×2

css ×1

html ×1

snap.svg ×1

svg ×1