我的设置

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作为背景图片时，

<svg> <animate>标记无法正常工作。在您给出的示例中，您可以像:hover和transition一样使用浅圆圈和黑圈（请注意我在url()中使用直svg） - 一般说来，虽然我写它的方式可能不会在IE 10/11或Edge上工作。我按原样离开它，这样你就可以看到我做了什么。见{ {3}}关于这方面的更多问题）

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

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

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

我的设置

SVG文件

HTML / CSS代码

问题

1 个答案: