【发布时间】：2013-12-31 16:52:09
【问题描述】：
我有一个 svg，里面有一张图片，我想知道我可以用 CSS 制作动画吗？
我让它在悬停时进行变换，但它有点跳跃，这是一种奇怪的效果，但后来我想我想如果它是动画的话，可能有可能让它看起来更自然，比如用我在 CSS3 动画中看到的反弹效果。
任何人对我如何从 svg（文本字符内的 png）中执行此操作有任何想法？
它在我的网站上看起来比在 JSFiddle 中看起来更好，但由于某种原因它有点模糊。
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 或框架请
更新 所以我找到了 SVG 的标签，但我无法旋转图像或让它四处移动（是吗？）而不移动整个对象（即三角形，它不是我想要的……）
小提琴现在动画不透明（虽然不是很好，永远不会完全不透明）
更新 2 Randak 在 cmets 中说，它在我的网站上看起来很模糊，我使用的是最新的稳定版 Chrome (Chrome OS)，它在小型和大型方面看起来都不错...
【问题讨论】：
-
没有完全看到跳跃。你到底想让它做什么？不清楚你想要什么样的动画。
-
如果你从小提琴中删除
属性，你会明白我的意思。 -
任何看起来流畅的动画都会很酷。也许如果图像要使用反弹效果或其他东西移动，那就是图像可以单独动画
-
最大的问题之一是您的图像在展开时变得非常模糊。 StackOverflow 不是就使用哪种动画发表意见的地方 - 如果您需要帮助制作特定动画，您可以询问，但决定您想要什么是您的工作。
-
我在问题中写道，我正在寻找一种反弹效果，旋转或移动显示在三角形部分内的图像，并在您要求它必须为图像设置动画时进行详细说明 - 给我休息！ my actual site 上没有出现模糊问题，如果您再次阅读问题...
标签： css svg svg-animate