Image map selection in svg

Nathan Published at Dev

Nathan

I am putting together an interactive for a biology project. I want to have the user click on a hyperlinked area of an image to link to more information. I am excited by SVGs because selections can be linked directly to the path without creating an image map overlay.

I used Illustrator to create the SVG and assigned a link to the path in the Attributes panel, but I was disappointed that the link is not active in the browser. enter image description here Here is that SVG: http://nspowers.org/bio/flower.html.

Next, I tried ImageMapster. I referenced the US map example (http://jsfiddle.net/juvyh/)

 $('img').mapster({
 mapKey: 'state'
 });

to generate this:

<img src="http://nspowers.org/bio/flower.svg" 
usemap="#usa" style="width:202px;height:151px;">
<map id="usa_image_map" name="usa">

<area href="#" state="stamen" full="Flower Identification" shape="poly" coords="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314 120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874   99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868">

here: http://jsfiddle.net/nspowers/juvyh/1971 using the Illustrator SVG code.

I do not understand why the selection area is different from the shading-on-hover. enter image description here

I would appreciate learning the cause of this difference and if there is a better workflow to achieve paths that can be hyperlinked directly within the SVG that will display in the browser.

david

It appears that the fill="none" attribute on the polygon is what is suppressing the link. If you change that to fill="rgba(0,0,0,0.0)" (fully transparent black) the link works fine.

Here is a jsfiddle: http://jsfiddle.net/FE9LD/

And here is a jsfiddle with some css to add in the highlight effect (may need latest chrome): http://jsfiddle.net/FE9LD/1/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-8

Comments

0 comments

From Dev

Related Related

Article