jquery - 使用 CSS 动画 svgs？

Question

我读过 sweet tutorial关于在 CSS-Tricks 上对 svg-image 中的元素进行动画处理。作者在 svg 中添加了 CSS 类来处理不同的元素。我想使用该技术，但不幸的是在背景图像上。所以 svg 在 CSS 中被设置为 background-image 并且不是内联的。如果不将 svg 直接放入我的 HTML 中，是否有机会实现相同的效果？也许用 jQuery？

谢谢!

Answer 1

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

这是一个在 SVG 背景上使用 CSS 过渡的演示:

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
}