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.
Join Stack Overflow to learn, share knowledge, and build your career.
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.
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 strokeopacity
for the entire objectfill_opacity
, but in SVG and CSS, it's fill-opacity
.
– Williham Totland
Jun 8 '20 at 0:30
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.
rgba
to rgb
and automatically added the fill-opacity
attribute to it. I'm not sure if this is how it works in normal SVGs too, but that's how it worked there. Either way, thanks.
– Hanna
Apr 21 '14 at 16:28
fill="#044B9466"
This is an RGBA color in hex notation inside the SVG, defined with hex values. This is valid, but not all programs can display it properly...
You can find the browser support for this syntax here: https://caniuse.com/#feat=css-rrggbbaa
As of August 2017: RGBA fill colors will display properly on Mozilla Firefox (54), Apple Safari (10.1) and Mac OS X Finder's "Quick View". However Google Chrome did not support this syntax until version 62 (was previously supported from version 54 with the Experimental Platform Features flag enabled).
Use attribute fill-opacity
in your element of SVG.
Default value is 1, minimum is 0, in step use decimal values EX: 0.5 = 50% of alpha. Note: It is necessary to define fill
color to apply fill-opacity
.
See my example.
To make a fill completely transparent, fill="transparent"
seems to work in modern browsers. But it didn't work in Microsoft Word (for Mac), I had to use fill-opacity="0"
.
fill="none"
works, but fill="transparent"
doesn't.
– samm
May 27 '20 at 15:46
fill="none"
is the standard way to do it and it works in Inkscape, Firefox, Chrome, or any other SVG application. See w3.org/TR/SVG2/painting.html#SpecifyingPaint
– Alex Henrie
Oct 17 '20 at 1:13
fill="none"
withpointer-events="visible"
. – Fabien Snauwaert Feb 8 '20 at 14:42