SVG Transparent Color in Firefox

November 17th, 2010

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.

{
  color: "#000";
  opacity: 0;
}

Previous: Developer Community: Where to Start? Next: Symfony – subfolders for partials