Question

我有一个带有图像的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或框架plz

UPDATE 所以我找到了SVG的标签，但我无法旋转图像或让它移动（我会吗？）而不移动整个对象（即三角形，不是我追求的......）

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

更新2 兰达克在评论中表示，我的网站看起来很模糊，我使用的是最新的稳定版Chrome（Chrome操作系统），它看起来很好...... enter image description here

Answer 1

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

以下是使用带有模式的路径元素的示例：http://jsfiddle.net/N7njg/（遗憾的是，Chrome似乎有一个动画模式的x属性的错误。）

如何在SVG内部制作图像（使用CSS？）

1 个答案: