Question

我正在玩一个SVG，如果你徘徊在它上面应该做一些动画。动画本身工作得很好，但是当我想在我的CSS中导入svg作为背景图像时，动画就不会发生，是不是我做错了？

动画是在SVG文件中制作的，这是代码：

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

我确实看到了该文件，但动画无效。

Answer 1

如果动画需要用户互动来触发它们，它们将无法用作背景图像（或HTML <img>）。用户事件永远不会传递给图像内容。

一种可能的解决方法：创建两个不同版本的SVG，一个没有动画，另一个动画设置为自动启动。然后使用CSS :hover伪类在两个背景图像之间切换。

编辑：正如Robert Longson在评论中所警告的那样，动画的开始时间不一定与在悬停时使用该图像的开关协调。在许多浏览器中，未使用的背景图像仍然存在于内存中，并且在再次使用图像时不会自动重新启动动画。

如果您希望更多地控制与用户事件相关的动画，但仍希望SVG与主页位于不同的文件中，请在HTML代码中使用<object>。

导入后作为背景图像，SVG动画将无法使用

1 个答案: