Jump to content

SVG fill animation

Recommended Posts

I've been trying to have the fill colour of this SVG change on hover, but I'm not having any luck. So far all it does increase in size when I hover over it. I'm not sure what other way I can go about accomplishing this.  Any suggestions?


I'm sorry about all the files, I can't seem to get the image to show on codepen...


am-tranparent.svg index.html main.css main.js


Share this post

Link to post
Share on other sites

Maybe you could put that into a demo for us?


  • Like 1

Share this post

Link to post
Share on other sites

Hi @namjoonforpresident. It looks like you're trying to animate the "fill" of an <object> (which won't work). I'd recommend placing the <svg> inline so that you can have access to its contents. Then you can target any individual <path> (or whatever). 


If you still need some help, I'd highly recommend following @PointC's suggestion and post a codepen demo. It greatly increases your chances of getting a solid answer :)


Happy tweening!

  • Like 2

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.