CODEWITHSUNDEEP
csssvg
Scindix
Scindix

Reputation: 1294

SVG image hover animation not shown in css background

I'm having trouble displaying an animated SVG file correctly when used in a CSS background

My Setup

SVG file

The SVG file I use is basically a semi-transparent circle that gets fully opaque when hovered. It works as I expect it to work.

<?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 code

The background property of toolbarbutton from the code below contains the same SVG, encoded as base64. This should have the same behavior as an external file like in my real world case.

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>

The Problem

The initial state of the SVG background is exactly the same as in the pure SVG case. However as you hover the toolbarbutton nothing happens. I would expect it to do the same as in the pure SVG example.

Did I make a mistake or is this not supported? And if so how do I work around this? Note that in my real world case I'd like to have a hover animation for toolbarbutton that is not possible with CSS but with SVG. And I can't change anything in the HTML code.

Upvotes: 3

Views: 1337

Answers (1)

henry
henry

Reputation: 4385

<svg> <animate> markup won't work when using an svg as a background image. In the example you gave, you can use a light circle and a dark circle along with :hover and transition, like so (note that I'm using straight svg in the url() - that works generally speaking, though the way I wrote it probably won't work on IE 10/11 or Edge. I'm leaving it as is so you can see what I've done. See https://css-tricks.com/probably-dont-base64-svg/ for more on this side issue)

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>

But of course that will limit you to effects available in CSS. If you have to use SVG, you might be able to have an absolutely-positioned SVG under (lower z-index) some other div - but if you can't change the markup at all, that's not a solution.

Upvotes: 3

Related Questions