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 />

<style type="text/css">
fill: grey;
fill: orange;
#state:hover {
fill: red !important;

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.