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

Question

我对 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;
}

<a class="button" href="#"></a>

Answer 1

好的...正在过渡中。当这些行被注释掉时，它在没有过渡的情况下工作，但没有跳跃的大小效果。

将过渡中的 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.

Answer 2

这似乎是 Chrome 实施新的 CSS3 图像转换图像规范规则的错误。

作为, the original CSS transitions spec did not include background-image as an animatable property. Images would therefore transition immediately, regardless of any transition settings. However, the latest editor's draft of the CSS Images Level 3 spec does define rules for how to transition images。这些规则建议浏览器应该将图像的大小从一个过渡到另一个，同时在它们之间淡入淡出。

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

为了防止 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;
}

<a class="button" href="#"></a>

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

Google Chrome - SVG background transition not working good

html

svg

google-chrome

background-image

css-transitions