动画 <in> svg 与 CSS？答案

【问题标题】：Animating <img> svg's with CSS?动画 <in> svg 与 CSS？
【发布时间】：2023-04-01 00:09:01
【问题描述】：

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

谢谢！

【问题讨论】：

如果您将 CSS 放入图像文件本身，它将起作用。虽然像悬停这样的交互是不可能的，但你可以像测试用例一样连续运行动画。
不，我不想要交互性。准确地说，这是一个风景，我只需要一些微妙的动作。您是否有在 svg 中添加 CSS 的某种文档或教程？比如在文档中的位置、标记等等
您的教程有问题。如果你想使用 SMIL，还有这个w3.org/Graphics/SVG/IG/resources/svgprimer.html#SMIL_animations

标签： jquery html css animation svg

【解决方案1】：

是的，使用 CSS，您正在为实际元素设置动画，而不是 SVG 背景。只是动画就像一个普通的 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
}

【讨论】：

我想你误会了。我想为图像中的某些部分设置动画。
不，在这种情况下，您无法访问任何 SVG 子级来制作动画。