Jump to content
Search Community

Placing PNG Graphic Overlay Within SVG Element

jedi test
Moderator Tag

Go to solution Solved by jedi,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

hi, i have made in this draggable rotating Throwprops star test file in the codepen.  i wonder if it is possible to put a star shaped graphic (a PNG with transparent background)  overtop of the star shape while maintaining the star as the SVG trigger element.    

See the Pen EKMmLb by jedione (@jedione) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo. Glad you are having fun with ThrowProps.


I would assume the png on top would prevent mouse events from firing on the element underneath.


Keep in mind your png could be INSIDE the SVG as an <image> https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag

In that case it just might make sense to make the png the trigger.

Or maybe another transparent element on top of the png can be the trigger. not really sure.


It would definitely help if you could add the png star so we can get a better visualization of what you are trying to do.

  • Like 1
Link to comment
Share on other sites

I agree with Carl seeing your PNG image over the star would be helpful ;)


I'm not near my desktop computer right now, but if you add a PNG image over your SVG star and still want the star SVG to be the trigger. You could add the CSS property pointer-events:none to your PNG image. Then when you click, it will pass the click event through the PNG image to your SVG star.

.png-image {

But keep in mind that CSS pointer-events does not work in IE10 or IE11. So you would have to make a workaround with JS


See the Pen BriCb by jonathan (@jonathan) on CodePen



  • Like 2
Link to comment
Share on other sites

hi, thanks for getting back to me.


here is a couple of texture maps of different resolutions for the star.


carl i tried to put the PNG in the SVG code like you said and all that does is block me from getting to the SVG trigger; i dont want to make the PNG be the trigger because then you have a huge invisible square trigger area.  



i was just looking in the codepen and i cant find a way to put the image file in there.  do you know how to do that. if not i can upload the test files to my server to look at it all together.


 jonathan:  i tried the pointer-events:none css setting  and it does allow me to pass through the PNG and click the SVG trigger elements;  that would be fine and it is working in chrome and firefox but in IE  it is making the ThrowProps spin really hard one way and barely at all the other way. i would like for it to work in IE. can you please describe the javascript workaround.


also i want to be able to fade to another texture on hover.  here attached is the hover texture as well.




Link to comment
Share on other sites

Hi jedi :)


Welcome to the GreenSock forums.


Since you want a textured background for the star that changes on hover, couldn't you use a pattern as the fill instead of trying to overlay a graphic on top? Maybe this would work for you?


See the Pen EyxXvj by PointC (@PointC) on CodePen


Hopefully that helps a little bit.


Happy tweening.


  • Like 1
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.
  • Create New...