I find myself in a bit of a bind at the moment. Within my code lies an SVG depicting a map of the United States. Upon clicking on a specific state, the entire country fades away, revealing a separate SVG displaying only that state. Each of the 50 states is stored in its own folder and accessed like so:
//On Map Click
$(document).ready(function(){
$('path').on("click",function(e){
var state = "counties/"+$(this).attr('id') + ".svg";
showState(state);
});
});
<object style="width:auto; height:auto; " id="countyLevel" data="" type="image/svg+xml">
</object>
Now, I’m curious if it’s possible to apply CSS styling to these individual state SVGs. Perhaps something along the lines of path:hover?
Below you’ll find my showState() function:
function showState(stateFile) {
$('.usa').fadeOut();
$('.returncountry').fadeIn();
$("#countyLevel").attr("data", stateFile);
$("#countyLevel").css('display', 'block');
}