Simple CSS namespace: highlighting a state in an SVG file using CSS

Simple CSS namespace: highlighting a state in an SVG file using CSS

I have this file hosted on my site:
https://commons.wikimedia.org/wiki/File:Blank_US_Map.svg
If you look inside at the SVG, there are pretty good IDs that correspond
to the state's 2 letter abbreviation. That is, I go to inspect element,
then URL, and see...
<path xmlns="http://www.w3.org/2000/svg" d="m 880.79902,142.42476
0.869,-1.0765 1.09022,-3.29102 -2.54308,-0.91347 -0.48499,-3.07156
-3.87985,-1.13162 -0.32332,-2.74824 -7.27475,-23.44082 -4.60142,-14.542988
-0.89708,-0.0051 -0.64664,1.616605 -0.64664,-0.484981 -0.96997,-0.969963
-1.45494,1.939925 -0.0485,5.032054 0.31165,5.667218 1.93992,2.74824
0,4.04152 -3.7182,5.06278 -2.58657,1.13164 0,1.13162 1.13163,1.77827
0,8.56802 -0.80831,9.21467 -0.16166,4.84982 0.96997,1.2933
-0.16166,4.52649 -0.48499,1.77828 0.96881,0.70922 16.78767,-4.42455
2.17487,-0.60245 1.84357,-2.77333 3.60523,-1.61312 z" id="NH"
class="state"/>
I'm not trying to do anything interactive---I'd just like to color some
states differently depending on a calculation, as a choropleth.
If I had a list of 3 color groups, Red, Green, Gray, and each state was in
those groups, how should I collect my CSS to color this map according to
that?
I tried this pure CSS, which didn't work:
#MI, #NH, #ME, #AK {
fill: "#ff0000";
}
#HI, #FL, #NY {
fill: "#00FF00";
}
#CA {
fill: "#F1F1F1"
}
I understand that I am supposed to use the SVG standard "fill" attribute
rather than the CSS attribute "background-color."
Here are my other efforts using CSS+javascript on jsfiddle.
http://jsfiddle.net/7wRmX/1/
I tried a couple more things here, including using javascript to add CSS,
as well as just trying to grab the element by name.
My guess in all these misadventures is I am not scoping the ID correctly?
It needs to be told to look for the ID within the SVG or something? Or
that it's a <path> object within the SVG?