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. (*) https://svgwg.org/svg2-draft/single-page.html#render-EstablishingStackingContex

Demo

Specification

Specification link


Specification being incubated in a Community Group

Status in Chromium

Blink>SVG


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
  • Shipped/Shipping
  • No signal
  • Positive

Owner

Search tags

SVG, stacking context,

Last updated on 2020-11-19