demo · v144

SVG Cascade Comparator

Set a fill attribute on the rect and a CSS fill rule. Chrome 144 lets the CSS rule win (SVG2). Pre-144, the presentation attribute beat any normal-specificity CSS. The readout shows which colour actually paints, and a probe tells you which behaviour your browser is on.

cascade behaviour: probing…

SVG presentation attribute

CSS rule (normal specificity)


  


  

    
the markup


<svg>
  <style>#target { fill: #0a8f5c; }</style>
  <rect id="target" fill="#0022ff" />
</svg>
<!-- Chrome 144 (SVG2): CSS wins → fill is #0a8f5c.
     Pre-144: presentation attribute wins → fill is #0022ff. -->

  


  

    
see also