导入为背景图像后，SVG动画将不起作用 [英] SVG animations won't work after import as a background-image

问题描述

我当时正在玩SVG，如果将鼠标悬停在SVG上，该SVG应该会做一些动画处理.动画本身可以完美运行，但是当我想将该svg作为背景图像导入CSS中时，动画就不会发生，这是我做错了吗?

I was playing with an SVG which was supposed to do some animations if you hovered over it. The animations themselves worked perfectly, but when I wanted to import that svg as a background-image in my CSS the animations just wouldn't happen, is there something I'm doing wrong?

动画是在SVG文件中制作的，代码如下:

The animations were made in the SVG file, here's the code:

<?xml-stylesheet type="text/css" href="svg.css" ?>
<svg version="1.1" id="Layer_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 309.3 248.5" style="enable-background:new 0 0 309.3 248.5;" xml:space="preserve">


<style type="text/css">
.st0{fill:none;stroke:#DDDDDD;stroke-width:4;stroke-miterlimit:10;}


.st0
{
fill: #DDDDDD;
}



svg:hover .st0
{
stroke: #38B2AE;
stroke-dasharray: 2500;
stroke-dashoffset: 0;    
-webkit-animation: dash 4s linear forwards;
-o-animation: dash 4s linear forwards;
-moz-animation: dash 4s linear forwards;
animation: dash 4s linear forwards;

-webkit-transition: fill 2s ease;
-moz-transition: fill 2s ease;
-o-transition: fill 2s ease;
transition: fill 2s ease;
fill: #38B2AE;
}

@-webkit-keyframes dash {
from {
    stroke-dashoffset: 2500;
    }
to {
    stroke-dashoffset: 0;
    }
}

@-o-keyframes dash {
from {
    stroke-dashoffset: 2500;
    }
to {
    stroke-dashoffset: 0;
    }
}

@-moz-keyframes dash {
from {
    stroke-dashoffset: 2500;
    }
to {
    stroke-dashoffset: 0;
    }
}

@keyframes dash {
from {
    stroke-dashoffset: 2500;
    }
to {
    stroke-dashoffset: 0;
    }
}

我的HTML是:

<header id="homenav">
<a class="logo" href="#index.html">Homepage</a>

和CSS:

.logo
{
background-image: url(../images/logo2.svg);
width: 75px;
height: 60px;
margin-left: 15px;
text-indent: -9999px;
margin-bottom: 15px;
display: block;
margin-left: auto;
margin-right: auto;
}

我确实看到了文件，但是动画无法正常工作.

I do see the file but the animations won't work.

推荐答案

如果动画需要用户交互才能触发，则它们将不能用作背景图像(或HTML <img>).用户事件永远不会传递到图像内容.

If the animations require user interaction to trigger them, they won't work as background image (or as HTML <img>). User events are never passed to image contents.

一个可能的解决方法:创建两个不同版本的SVG，一个不带动画，另一个带将动画设置为自动开始.然后使用CSS :hover伪类在两个背景图像之间切换.

One possible workaround: Create two different versions of the SVG, one without animation, and one with the animations set to start automatically. Then use CSS :hover pseudoclass to switch between the two background images.

不过，正如罗伯特·朗森(Robert Longson)在评论中警告说的那样，动画的开始时间不一定与在悬停时使用该图像的切换相协调.在许多浏览器中，未使用的背景图像仍保留在内存中，并且再次使用该图像时不会自动重新启动动画.

As Robert Longson warns in the comments, however, the start times of the animation won't necessarily coordinate with the switch to using that image on hover. In many browsers, the unused background image still persists in memory, and animations are not automatically re-started when the image is used again.

如果您想更好地控制与用户事件有关的动画，但仍希望SVG与主页位于单独的文件中，请在HTML代码中使用<object>.

If you want more control over the animation as it relates to user events, but still want the SVG to be in a separate file from the main page, use an <object> in the HTML code.

这篇关于导入为背景图像后，SVG动画将不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！