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 and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.