SVG fill color transparency / alpha?

Question

Is it possible to set a transparency or alpha level on SVG fill colours?

I've tried adding two values to the fill tag (changing it from fill="#044B94" to fill="#044B9466"), but this doesn't work.

Answer 1

You use an addtional attribute; fill-opacity: This attribute takes a decimal number between 0.0 and 1.0, inclusive; where 0.0 is completely transparent.

For example:

<rect ... fill="#044B94" fill-opacity="0.4"/> 

Additionally you have the following:

• stroke-opacity attribute for the stroke
• opacity for the entire object

Answer 2

As a not yet fully standardized solution (though in alignment with the color syntax in CSS3) you can use e.g fill="rgba(124,240,10,0.5)". Works fine in Firefox, Opera, Chrome.

Here's an example.