SVG图像悬停动画未在css背景中显示

Question

在 CSS 背景中使用时无法正确显示动画 SVG 文件

我的设置

SVG 文件

我使用的 SVG 文件基本上是一个半透明的圆圈，当悬停时完全不透明。它按我的预期工作。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
       version="1.1" viewBox="0 0 24 24" id="svg2">
      <circle
         cx="12" cy="12" r="12" fill="#61737b" id="circle4" style="fill-opacity:0.5">
         <animate attributeType="CSS" attributeName="fill-opacity" 
               from="0.5" to="1" dur="0.2s" begin="mouseover" fill="freeze" />
         <animate attributeType="CSS" attributeName="fill-opacity" 
               from="1" to="0.5" dur="0.2s" begin="mouseout" fill="freeze" /></circle>
    </svg>

HTML/CSS 代码

下面代码中toolbarbutton 的背景属性包含相同的SVG，编码为base64。这应该与我的真实案例中的外部文件具有相同的行为。

toolbarbutton {
  width: 40px;
  height: 40px;
  display: block;
  border: 1px solid black;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiAgIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0IiBpZD0ic3ZnMiI+DQogIDxjaXJjbGUNCiAgICAgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNjE3MzdiIiBpZD0iY2lyY2xlNCIgc3R5bGU9ImZpbGwtb3BhY2l0eTowLjUiPg0KICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVUeXBlPSJDU1MiIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIgDQogICAgICAgICAgIGZyb209IjAuNSIgdG89IjEiIGR1cj0iMC4ycyIgYmVnaW49Im1vdXNlb3ZlciIgZmlsbD0iZnJlZXplIiAvPg0KICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVUeXBlPSJDU1MiIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIgDQogICAgICAgICAgIGZyb209IjEiIHRvPSIwLjUiIGR1cj0iMC4ycyIgYmVnaW49Im1vdXNlb3V0IiBmaWxsPSJmcmVlemUiIC8+PC9jaXJjbGU+DQo8L3N2Zz4=);
}

<toolbarbutton></toolbarbutton>

问题

SVG 背景的初始状态与纯 SVG 情况完全相同。 但是，当您将鼠标悬停在 toolbarbutton 时，什么也没有发生。我希望它与纯 SVG 示例中的功能相同。

是我弄错了还是不支持？如果是这样，我该如何解决这个问题？请注意，在我的真实案例中，我希望为toolbarbutton 制作悬停动画，这在 CSS 中是不可能的，但在 SVG 中是不可能的。而且我无法更改 HTML 代码中的任何内容。

Answer 1

<svg> <animate> 标记在使用 svg 作为背景图像时不起作用。在您给出的示例中，您可以使用浅色圆圈和深色圆圈以及 :hover 和 transition，就像这样（请注意，我在 url() 中使用的是直的 svg - 一般而言，虽然我写它的方式可能不适用于 IE 10/11 或 Edge。我将其保留原样，以便您可以看到我所做的。有关此问题的更多信息，请参阅 https://css-tricks.com/probably-dont-base64-svg/）

div {
  width: 40px;
  height: 40px;
  display: block;
  border: 1px solid black;
  /* changed this */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="#b0b9bd"></circle></svg>');
  /* added this */
  transition: 0.2s;
}
/* added this */

div:hover {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="#61737b"></circle></svg>');
  transition: 0.2s;
}

<div></div>

但这当然会限制您使用 CSS 中可用的效果。如果您必须使用 SVG，您可以在其他 div 下（下 z-index）拥有一个绝对定位的 SVG - 但如果您根本无法更改标记，那不是解决方案。