demo · v141

Nested SVG W/H

Drag the sliders to size the nested <svg> element via CSS. Pre-141, CSS width/height was ignored on nested SVG; in 141, the presentation attributes promote to first-class CSS properties that the cascade can override.

probing CSS reach over SVG…

      

    

  


  

    
the markup


<svg viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="ivory"/>
  <svg id="nested" x="40" y="40">
    <rect width="100%" height="100%" fill="#0022ff"/>
  </svg>
</svg>

<style>
  /* Chrome 141: this actually wins over the nested svg width/height presentation attributes. */
  #nested { width: 120px; height: 120px; }
</style>

  


  

    
see also