SVG2 specifies that <foreignObject> to be a stacking context (*). Previously, Chrome did not follow the SVG2 spec. Making <foreignObject> a stacking context allows developers to place HTML content underneath a <foreignObject> without confusion. For example, it wouldn't make much sense to place content at z-index:1 above the containing SVG. Gecko and Edge already implement this behavior. (*)



Specification link

Specification being incubated in a Community Group

Status in Chromium


Enabled by default (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • Shipped/Shipping
  • No signal
  • Positive


Search tags

SVG, stacking context,

Last updated on 2020-11-19