We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

« SVG Attribute reference home

This attribute specifies the opacity of the color or the content the current object is filled with.

Usage context

Categories Presentation attribute
Value <opacity-value> | inherit
Initial value 1
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

Example

SVG

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" />
</svg>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" fill-opacity="0.25" />
</svg>

Result

Elements

The following elements can use the fill-opacity attribute:

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ? ? ?

See also

Document Tags and Contributors

Contributors to this page: connorshea, jalbertbowden, kscarfone, Jeremie, ratcliffe_mike
Last updated by: connorshea,