css - 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，您可能能够在(较低的 z-index )其他一些 div 下拥有一个绝对定位的 SVG - 但如果您根本无法更改标记，那不是解决方案。