How to change or call svg clippath polygon attributes in CSS - html

Question

Recently I exported a map document from the ESRI ArcMap 10.2.2 to SVG.
I would like to animate this map with css and javascript however the "clippath" polygons that arcmap creates makes it impossible to do so. How would can I get the group "Puerto Rico" to highlight over mouseover.
This is a summary of the code:
<svg width="1008pt" height="612pt" viewBox="0 0 1008 612" enable-background="new 0 0 1008 612" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Puerto_Rico_and_Virgin_Islands">
<g id="state" class="test">
<g id="Puerto_Rico">
<clipPath id="SVG_CP_1">
<path d= coordinates are put in here />
</clipPath>
</g>
</g>
The CSS
<style type="text/css">
.test{
fill: grey;
stroke:#fff;
stroke-width:0.75;
stroke-opacity:1;
fill: orange;
}
#state:hover {
fill: red !important;
</style>
The real code:
visit jsfiddle for the entire code http://jsfiddle.net/jwitcoski/arv4g21f/3/
Using the wikipedia svg map that does not use clippath I was able to get everything to work. http://jsfiddle.net/jwitcoski/y3yhgjjy/9/

Answer 1

The clipPath issue is a red herring. It has nothing to do with why your CSS isn't working.
The reason your sample fiddle wasn't working was for two reasons:
Your CSS was missing a closing '}'. But I am guessing this was just a typo introduced in your fiddle.
The main reason was that your path definition for PR had a presentation attribute for fill.
<path fill="none" ... />
This presentation attribute has a higher priority than the CSS rule because it is more specific and thus over-rides it. If you remove the fill="none", everything works.
Demo fiddle here