Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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


Link to comment
Share on other sites

Maybe you could put that into a demo for us?


  • Like 1
Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.