如何在SVG中设置图像动画（使用CSS？）

我有一个svg，里面有一个图像，我想知道我可以用CSS制作动画吗

我让它在悬停时进行变换，但它有点跳跃，这是一种奇怪的效果，但我想如果它设置动画，可能会使它看起来更自然，比如我在CSS3动画中看到的反弹效果

有人对我如何在svg（文本字符中的png）中实现这一点有什么想法吗

在我的网站上，它看起来比在这个网站上更好，因为某种原因，它变得有点模糊

SVG代码：

<svg width="50px" height="50px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" style="width: 50px;height: 50px;">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="118" height="108"><image xlink:href="https://31.media.tumblr.com/9766ee4952b593bbc1af5e2d2249c858/tumblr_inline_mxnnn7dXwh1s16nrs.jpg" x="0" y="0" width="50" height="50"></image>
        </pattern>
    </defs>
<text x="0" y="0" font-size="59" fill="url(#img1)">
        <tspan x="-1" y="49">▼</tspan>
    </text>

</svg>

▼

否JS或框架plz

更新因此我找到了SVG的标记，但如果不移动整个对象（即三角形，我不想要它…），我将无法旋转图像或让它四处移动（我会吗？）

小提琴现在正在设置不透明度的动画（虽然不是很好，但永远不会达到完全不透明）

更新2Randak在评论中说，我的网站上看起来很模糊，我使用的是最新的稳定Chrome（Chrome OS），无论大小，它都很好。。。

缩放时，您看到的“跳跃”可能是捕捉到不同的字体大小。您可以使用

文本呈现：geometricsprecision

来消除这种情况。但是，如果您的形状只是一个三角形，为什么不使用

元素呢？这通常会更好，并且会始终平稳过渡

---

下面是一个将路径元素与模式一起使用的示例：（不幸的是，chrome似乎在设置模式的x属性动画方面存在缺陷）。

没有看到跳跃。你到底想让它做什么？现在还不清楚你想要什么类型的动画。如果你从小提琴上移除这个属性，你就会明白我的意思。任何看起来平滑的动画都会很酷。也许，如果图像是以反弹效果或其他方式移动的，也就是说，如果图像可以单独设置动画，那么最大的问题之一就是图像在展开时变得非常模糊。StackOverflow不是一个发表关于使用哪种动画的意见的地方——如果你想帮助制作一个特定的动画，你可以问一下，但你的工作是决定你想要什么。我在问题中写道，我在寻找反弹效果，通过旋转或移动显示在三角形部分内的图像，并在您要求设置图像动画时进行详细说明-让我休息一下！如果你读了这个问题，模糊问题就不会发生了……这是我的第一个计划，忘记了。无法在中创建路径，因此尝试了其他方法。跳跃是与文本字符（实际上很好地转换了v）中图像的比例有关的，它实际上知道了如何获得路径和svg代码——看起来好得多！你也可以在一组或SVG中做一些基本的图像动画，比如旋转等等（你甚至可以用鼠标盖计时，但这会有点麻烦）。用鼠标盖计时，需要改进，但不确定你的意思是这样的移动，但是，即使不是css解决方案，发布以防万一也有助于提供一些想法。理想情况下，如果我能将其中的动画与该图像更大版本上的剪贴相结合，允许它在不进入空白的情况下四处移动。。。鼠标悬停的想法很好，只是想弄明白如何剪裁多边形。。。与-相比，我的代码中的路径格式看起来是错误的