Why isn't the style tag in this SVG affecting elements?

user_123671 0
Viewed 40

I have a simple SVG with a single element, that has a fill of red:

<svg width="100" height="60" viewBox="0 0 100 60" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill="red" d="M4.93141 44.3745H2.8013V59.6912H4.93141V44.3745Z"/>
</svg>

I have added a stylesheet, and made the element use the class, but the element is not green per the code below:

<svg width="100" height="60" viewBox="0 0 100 60" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css" >
  .foreground { 
    fill: "green"; 
  }   
  </style>
  <path class="foreground" d="M4.93141 44.3745H2.8013V59.6912H4.93141V44.3745Z"/>
</svg>

Why is the inline style not affecting the element with the class?

I have tried various combinations of CDATA, <defs> etc (per various examples) and haven't found a solution so far.

svg css
1 Answers

Because there is no need for the double quote around green.

<svg width="100" height="60" viewBox="0 0 100 60" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css" >
  .foreground { 
    fill: green; 
  }   
  </style>
  <path class="foreground" d="M4.93141 44.3745H2.8013V59.6912H4.93141V44.3745Z"/>
</svg>

user_40310830
Related