使用CSS动画<img/> svg？

Question

我已经在CSS-Tricks上阅读了关于svg-image动画元素的sweet tutorial。作者使用svg中添加的CSS类来解决不同的元素。我想使用这种技术，但不幸的是在背景图像上。所以svg在CSS中设置为背景图像而不是内联的。 如果不将svg直接放在我的HTML中，是否有机会达到同样的效果？也许用jQuery？

谢谢！

Answer 1

是， 使用CSS，您可以设置实际元素的动画，而不是SVG背景。动画就像一个普通的HTMLElement：

这是一个使用CSS过渡到SVG背景的演示：

http://jsfiddle.net/8dan1kx0/

div {
    background-image: url(http://demosthenes.info/assets/images/thumbnails/homer-simpson.svg);
    width: 200px;
    height: 200px;
    transition: all 1s;
    border: 1px solid
}

div:hover{
    width: 500px;
    height: 500px
}