SVG fill color transparency / alpha?

colors svg transparency alpha fill
Ollie Glass picture Ollie Glass · May 18, 2011 · Viewed 349.9k times · Source

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

Williham Totland picture Williham Totland · May 18, 2011

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

Related questions

How to set text color for my d3 chart title?

I have my d3 chart title, text append on the svg as per below: svg.append("text") .attr("x", (width / 2)) .attr("y", 0) .attr("text-anchor", "middle") .style("font-size", "14px") .text(text); reference here But I would like to set the text …

Read More
SVG: color of the shadow

I want to write a simple rectangle with a red shadow in SVG. I have a simple filter: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400"> <title>svg arrow with dropshadow</title> &…

Read More
svg multiple color on circle stroke

I want to create a rainbow circle, like the picture below: How can I draw the curved and multiple color stop gradient? Here's my current code:

Read More