I've got the beginnings of an interactive SVG map http://utatest.dreamhosters.com/get-involved/wisconsin-county-directory/ and I used the plugin SVG Support which allowed me to upload the map. I want to put HTML Bookmarks below the map, so users can click on a county and jump to the appropriate text below. The map was created with Inkscape and I found this documentation http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Links.html.
I used the object tag to display the map based on this: http://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files. I copied in the code from the Inkscape documentation and tinkered with it for hours and hours and can't get it to work. Note, Dane County (Madison Area) is the the only one with a link. I'm not sure what link to put in Inkscape, so I tried (1) #dane (2) the URL plus #dane with and without a "/". The basic bookmark at the bottom of the example works, but clicking on Dane County does nothing. When I hover over the county it doesn't show the "/" before #dane. I suspect that's a problem, but when I add a "/" at the end of the object URL the map doesn't show at all!! Please help me before I off myself!! Thanks!! (I don't know javascript or a whole lot of CSS, but I can use FTP.)

Hi,

short story:
try "/get-involved/wisconsin-county-directory/#dane" in the href field in inkscape
and "_parent" for the target. (There's no typo there is an underscore before parent)


long story
It looks like your svg is embedded in an iframe (=a "window" in your document that is used to show the content of another document).
I guess it's a workaround because wordpress doesn't work well with svg or the like.

A svg is like an html document : if you put link into it then clicking one of those link will replace current document (html or svg) with the document that is linked.
If you're @ http://utatest.dreamhosters.com/get-inv ... directory/ and you click "sign the petition" then you go to http://utatest.dreamhosters.com/petition/(= you replace the document [..] wisconsin-county-directory/ with .../petition)

Right now, if you click Dane, then it will replace the svg in the iframe (http://utatest.dreamhosters.com/wp-cont ... ectory.svg) by the document hosted you (incorrectly) linked to get-involved/wisconsin-county-directory/#dane

The result will be
the page hosted at wisconsin-county-directory showing a windowed version of
the page hosted at wisconsin-county-directory showing a windowed version of
svg

Everytime you click on the svg, you'll add another level of windowing
the page hosted at wisconsin-county-directory showing a windowed version of
the page hosted at wisconsin-county-directory showing a windowed version of
the page hosted at wisconsin-county-directory showing a windowed version of
the page hosted at wisconsin-county-directory showing a windowed version of
...
svg

and so on.
So you'll need to add a target="_parent" in inkscape.
When you do this you explain that when a link of the svg is clicked you don't want to replace the (content of the) svg by (the content of) the link but you'd rather replace the (content of the) parent of svg by the link
= you replace [..] wisconsin-county-directory/ by [..] wisconsin-county-directory/#dane

Then you need to fix your href in inkscape.
Currently you're using a relative path : "get-involved/wisconsin-county-directory/#dane".
As a relative url it will be added to the url of the svg : this will translate to /wp-content/uploads/2016/06/WI-County-Directory.svg + get-involved/wisconsin-county-directory/#dane = /wp-content/uploads/2016/06/get-involved/wisconsin-county-directory/#dane

What you want is an "absolute" path : "/get-involved/wisconsin-county-directory/#dane". (exactly same but with leading /)

Thanks Vince...great reply! Anyway, it started working! Vince is right about the iframe, sub window thing. I woke up this morning thinking about the Target field, just like Vince said, but I couldn't find any documentation on the field (jeez, Inkscape). But I started fooling around with it again and it started working! The only thing I did was to delete the svg media file and re-add it (with just #dane), plus I just used the "Add Media" button at the top of the WP Editor to add the image. That's it, so now it just looks like:



I don't need to put the whole URL into the Inkscape SVG file, 'cuz all I want it to do is jump down the page to the appropriate section on that county. Yay!