Google Chrome - SVG 背景过渡效果不佳答案

【问题标题】：Google Chrome - SVG background transition not working goodGoogle Chrome - SVG 背景过渡效果不佳
【发布时间】：2015-03-01 21:13:01
【问题描述】：

我对 Chrome 中的 SVG 背景过渡问题有疑问。它在 Firefox、Safari 和 Internet Explorer 中运行良好且流畅，但在 Chrome 中却不行。当我悬停按钮时，它首先显示更大的 SVG，然后降级到所需的大小。它在除 Chrome 之外的所有其他浏览器中运行流畅。

请检查：

jfiddle

.button {
  background: rgba(0, 0, 0, 0.6) 
    url('https://cdn.mediacru.sh/b/bnN8POn3lz8M.svg') 
    top left no-repeat;
  background-position: center;
  background-size: 100% !important;
  width: 200px;
  height: 200px;
  display: block;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.button:hover {
  background: rgba(0, 0, 0, 0.9) 
    url('https://cdn.mediacru.sh/y/ypwpa6pIMXdX.svg') 
    top left no-repeat;
}

&lt;a class="button" href="#"&gt;&lt;/a&gt;

【问题讨论】：

标签： html google-chrome svg background-image css-transitions

【解决方案1】：

这似乎是 Chrome 实现用于转换图像的新 CSS3 图像规范规则的一个错误。

作为@rfornal noted，original CSS transitions spec 没有不包含背景图像作为动画属性。因此，无论任何转换设置如何，图像都会立即转换。然而，最新的 CSS Images Level 3 规范编辑草案does define rules for how to transition images。这些规则建议浏览器应该在图像之间淡入淡出时将图像的大小从一个转换到另一个。

到目前为止，图像转换仅在 Chrome（和使用 Chrome 的 Blink 渲染引擎的 Opera）中实现，这就是其他浏览器没有任何问题的原因。

为了防止 Chrome 尝试任何花哨的图像转换，请明确说明要转换的属性，而不是使用 transition: all。

.button {
  background: rgba(0, 0, 0, 0.6) 
    url('https://cdn.mediacru.sh/b/bnN8POn3lz8M.svg') 
    top left no-repeat;
  background-position: center;
  background-size: 100% !important;
  width: 200px;
  height: 200px;
  display: block;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  
  /* reset to only transition the specific properties
     you want to change, NOT including background-image */
  -webkit-transition-property: background-color, background-position;
  transition-property: background-color, background-position;
}
.button:hover {
  background: rgba(0, 0, 0, 0.9) 
    url('https://cdn.mediacru.sh/y/ypwpa6pIMXdX.svg') 
    top left no-repeat;
}

&lt;a class="button" href="#"&gt;&lt;/a&gt;

【讨论】：

谢谢你们，就是这样。我在过渡参数中使用 all 而不是 background-color / opacity 是我的错。非常感谢。

【解决方案2】：

好的……它正在过渡中。当这些行被注释掉时，它可以在没有过渡的情况下工作，但没有跳跃的尺寸效果。

将过渡中的 all 更改为 opacity 似乎在 Chrome 中有效，但我不确定这是否是您想要的效果。

-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;

不幸的是，我第一次尝试修复是为背景图像设置动画，而您不能在背景图像上使用过渡；请参阅 w3c list of animatable properties。

【讨论】：