Results 1 to 2 of 2

Thread: svg or png as a button - transparent background not clickable

  1. #1

    Default svg or png as a button - transparent background not clickable

    Hi there
    is there a way to have a shape as a button where you can only click on the shape and not the background it comes with. With either a svg or png?

  2. #2
    Sencha User
    Join Date
    Apr 2012


    Hi nikclifford,

    There are two ways to do this with images.

    1) Define a clickable area in your image. However, you should do this outside Animator once you've exported the project, as you cannot directly edit HTML structure in Animator. For more information see

    2) Copy the image to a canvas element and then sample the pixel that was clicked. This is doable inside Animator with a little bit of JavaScript. However, this will only work in live projects that are deployed on a server (if you are just running the animation after you click 'preview' or from your local harddrive, it will not work due to browser security settings).

    For 2, I've set up a sample project if you are interested. You can get it at (click 'download ZIP' if you don't use GitHub). Be sure to preview the animation on a server (it can be your localhost or you can upload it somewhere), as running it directly from your harddrive, you will run into browser blocking that I mentioned above.

    The above methods will work for any image format that supports opacity/alpha (GIF, PNG). They will not work with SVG's however.

    A workaround:

    3) You can draw invisible elements on top of your image using the square or circle tool that will form your 'hit area' - in this way you can approximate the shape of your object in the image. You would need to attach a click event listener to every one of these.

    Hope this helps.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts