Geek Answers Handbook

How to animate an image inside SVG (using CSS?)

I have an SVG with an image inside, and I wonder if I can animate this with CSS?

I have to convert when it freezes, but it jumps a bit, which is a strange effect, but then I thought that it might be possible to make it more natural if it was animated, for example, using the bounce effect, which I saw in CSS3 animation.

Does anyone have any ideas on how I can do this from within svg (png inside a text character)?

It looks better on my site than in JSFiddle , in which for some reason it gets a little blurry.

SVG Code:

<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>

No JS or plz frameworks

UPDATE. , SVG, ( ?), (.. , , ...)

( , )

2 , , Chrome (Chrome OS), ... enter image description hereenter image description here

+4
1

, "", , . text-rendering: geometricPrecision, . , - , <path>? .

path : http://jsfiddle.net/N7njg/ ( , , x ).

+1

More articles:


All Articles