SVG Transparent Color in Firefox

I had the strangest bug in Firefox when rendering SVG. I used a 3rd party library called RaphaelJS that can output both VML and SVG based on the browser.

The Context

To allow a user the resizing of a visual element, I created a rectangle with the color “transparent” in the lower-right corner. The transparent shape was placed on top of the visual, thus intercepting mouse events.

The Issue

It all worked nicely in Safari and other browsers. In Firefox, however, the color was output as “none” for some reason, thus NOT intercepting any mouse events. The customer was unhappy. It is not clear whether the problem resides in Firefox or the RaphaelJS lib, but I found a clean workaround.

The Solution

Instead of making the shape transparent, I set its color to black. I then set the opacity to 0 (zero) and bingo! The shape was still invisible but the mouse events were properly intercepted in all major browsers.

2 thoughts on “SVG Transparent Color in Firefox

  1. Same trick used by click-jackers 🙂

  2. @Philip Tellis
    A similar method is used in everyday Flash/Flex programming (hitArea).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">