How to get an SVG(+XML) image to interact with the page it is in

问题

In my aspx page I have a map of different countries as an SVG object, and a checkbox for each country:

<object id="map" data="_images/map.svg" type="image/svg+xml"></object>
<asp:CheckBox ID="chkScotland" runat="server" />
<asp:Checkbox ID="chkEngland" runat="server"/>

The SVG was created in Adobe Illustrator. The polylines for each country are grouped (the shapes for each country were collected in a layer for that country in Illustrator) and the groups have the name of the country as their ID. Each group has an onclick event.

<g id="Scotland" onclick="areaClick(evt)" >
   <polyline ...></g>

Now I need to toggle the checkbox for Scotland when the user clicks on its shape on the map. A bit of googling indicates that a script within the SVG file should do this.

My Javascript sucks. I can get the onclick event to fire, but I can't (1) get the id of the area that was clicked (varCountry = document.activeElement gives null) or (2) use it to toggle the checkbox for that country on the page (window.parent.document.chkScotland doesn't find the checkbox control)

Thanks, Xmas cheer, and kudos for any help!

来源：https://stackoverflow.com/questions/27572161/how-to-get-an-svgxml-image-to-interact-with-the-page-it-is-in