CODEWITHSUNDEEP
csssvgsvg-animate
Louis Maddox
Louis Maddox

Reputation: 5566

How to animate image inside SVG (with CSS?)

I've got an svg with an image inside, and I'm wondering can I animate this with CSS?

I've got it to transform when hovered over, but it's jumping a little which is a weird effect, but then I thought I guess there might be the possibility to make it look more natural if it's animated, such as with a bounce effect which I've seen done in the CSS3 animations.

Anyone got any ideas on how I could do this from inside an svg (a png inside a text character)?

It looks nicer on my site than it does in this JSFiddle, in which it goes a bit blurry for some reason.

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

UPDATE So I found the tag for SVG but I wouldn't be able to rotate the image or have it move around (would I?) without moving the whole object (i.e. the triangle, which isn't what I'm after...)

The fiddle is now animating opacity (albeit not very well, never reaches fully opaque)

UPDATE 2 Randak says in the comments it looks blurry on my site, I'm on the latest stable Chrome (Chrome OS) and it looks good at small and large... enter image description hereenter image description here

Upvotes: 4

Views: 3173

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

Possibly the "jumping" you see is snapping to different fontsizes when scaling. You could use text-rendering: geometricPrecision to hopefully eliminate that. However, if your shape is just a triangle, why not just use a <path> element instead? That is usually better and will always transition smoothly.

Here's an example of using a path element with a pattern: http://jsfiddle.net/N7njg/ (unfortunately it seems chrome has a bug with animating the x attribute of a pattern).

Upvotes: 1

Related Questions