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 やフレームワークはありませんplz

更新だから、SVGのタグを見つけましたが、オブジェクト全体（つまり、三角形、これは私が求めているものではありません.. .)

フィドルは不透明度をアニメーション化しています (あまりうまくいきませんが、完全に不透明になることはありません)。

更新 2 Randak は、私のサイトではぼやけて見えるとコメントで述べています。 ここに画像の説明を入力ここに画像の説明を入力

4

1 に答える 1

1

おそらく、表示される「ジャンプ」は、スケーリング時にさまざまなフォントサイズにスナップすることです。text-rendering: geometricPrecisionうまくいけばそれを排除するために使用できます。ただし、形状が単なる三角形である場合は、<path>代わりに要素を使用してみませんか? 通常はその方が適切であり、常にスムーズに移行します。

パターンでパス要素を使用する例を次に示します: http://jsfiddle.net/N7njg/ (残念ながら、クロムにはパターンの x 属性をアニメーション化するバグがあるようです)。

于 2013-12-13T09:58:08.147 に答える