4

我有一个 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">▼&lt;/tspan>
    </text>

</svg>

没有JS 或框架请

更新所以我找到了 SVG 的标签，但如果不移动整个对象（即三角形，这不是我想要的），我将无法旋转图像或让它四处移动（我会吗？） .)

小提琴现在动画不透明（虽然不是很好，永远不会完全不透明）

更新 2 Randak 在评论中说，它在我的网站上看起来很模糊，我使用的是最新的稳定版 Chrome (Chrome OS)，它在小型和大型方面看起来都不错...... 在此处输入图像描述在此处输入图像描述

4

1 回答 1

1

您看到的“跳跃”可能是在缩放时捕捉到不同的字体大小。你可以text-rendering: geometricPrecision用来希望消除它。但是，如果您的形状只是一个三角形，为什么不直接使用一个<path>元素呢？这通常会更好，并且总是会平稳过渡。

下面是使用带有模式的路径元素的示例：http: //jsfiddle.net/N7njg/（不幸的是，chrome 似乎有一个错误，可以为模式的 x 属性设置动画）。

于 2013-12-13T09:58:08.147 回答