Assegnare un link ad oggetto in svg 
Author: Nicola M.Ho realizzato in HMTL una image map in SVG.
Come io desideravo, un paio di sezioni, al passaggio del mouse, mostrano la parte evidenziata dell'oggetto.
In concliusione, quello che mi sembrava più facile non riesco a realizzarlo, ossia di assegnare la funzione link ai due oggetti...?
Allego nella immagine le due sezioni arancione e porpora (<polygon id="serra" fill="nome" points="17.....; <polygon id="alto" fill="nome" points="77.....)
Allego di seguito il codice realizzato e chiedo se gentilmente qualcuno mi può aiutare nell'indicarmi il passaggio opportuno, la correzione da attuare, codice in hmtl, css o direttamente nella parte "svg" per poter far questo, grazie:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#serra, #alto {fill:rgba(255, 255, 255, 0.35);pointer-events:all;}
#serra:hover {fill:rgba(231,120,23, 0.50);}
#alto:hover {fill:rgba(144,30,120, 0.50);}
</style>
<script type='text/javascript'>//<![CDATA[window.onload=function(){}//]]>
</script>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 283.45 226.76" enable-background="new 0 0 283 45 226.76" xml:space="preserve">
<g id="Layer_1">
<g id="Map_2_">
<g id="Map">
<image overflow="visible" enable-background="new" width="592" height="473" transform="scale(0.48 0.48)"id="Map_1_" xlink:href="data:image/png;base64,iecx4C+MXGxAC6Hj58uFDZx0Z4glGRkVy7tcmmp/>
</g>
<g id="Layer_2">
<polygon id="serra" fill="nome" points="177.55 76 250.99 75.72 251.21 126.19 188.64 126.4 188.57 107.97 183.46 107.97 183.46 101.85 177.62 101.92 177.55 76"/>
<polygon id="alto" fill="nome" points="77.83 109.05 151.2 109.2 151.13 159.6 88.63 159.52 88.63 141.02 83.59 141.02 83.59 134.9 77.76 134.9 77.83 109.05"/>
</g>
</svg>
... per assegnare un link ad una immagine SVG basterebbe usare il metodo tradizionale:
<a href="pagina.html"><img src="files/nomeimmagine.svg" width="100" height="100"/></a>
... per eventualmente valutare il tuo codice, postane la fonte...
.
Author
Grazie del suggerimento.
Sebbene non è esattamente con la soluzione che mi avete proposto che ho risolto il problema (assegnare un link alla immagine stessa di svg, ma ad uno degli elementi dentro l'svg..), mi è comunque servito per insistere ed arrivare finalmente ad una soluzione.
Ripeto, quello che chiedevo non era assegnare un link alla immagine svg, ma, essendo svg un insieme di immagini vettoriali e distinte, assegnare un link ad una di queste immagini. Spero di eser stato chiaro.
Ora svg essendo, come tutti programmi vettoriali, diviso in livelli, ho notato che i link funzionano, o comunque meglio attuabili, se applicati sugli oggetti facenti parte dei livelli in primo piano. Di seguito allego in corsivo un esempio:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg>
<g id="Livello_1">
<image overflow="visible" width="592" height="473" transform="matrix(0.4788 0 0 0.4794 0.928 0.3001)" id="Map_1_" xlink:href="data:image/jpeg;base64,/9"/>
</g>
<g id="Livello_2">
<polygon points="97.19 76.09 23.75 75.73 23.54 110.07 29.66 110.07 29.58 117.7 39.3 117.78 39.23 126.27 90.64 126.49 90.64 119.36 96.98 119.36 "/>
</g>
<g id="Livello_3">
<a xlink:href="08-carta-della-valle-d-orco.html">
<polygon points="98.06 75.22 22.89 74.86 22.74 110.94 28.79 110.94 28.72 118.57 38.44 118.64 38.44 127.06 91.43 127.35 91.5 120.22 97.84 120.22 "/>
</g>
</svg>
</body>
</html>
Ora che comunque ho risolto questo, vi è un secondo problema. Non so se affrontarlo continuando questa discussione od aprire il "titolo" di un nuovo topic.
Il problema è il seguente: la pagina HTML prodotta, con integrata una parte in svg, funziona perfettamente con i browser Edge, Mozilla Firefox e Google Chrome.
Non così con Internet Explorer. Ossia l'mmagine e tutte le funzioni ci sono e funzionano, ma la si vede rimpicciolita all'incirca del 70%.
Ho fatto vari esperimenti, anche con altri file svg che, se aperti solo come soli svg in Internet Explorer appaiono corretti nelle funzioni e della grandezza voluta, ma se integrati nella pagina web HTML e poi pubblicati, ripeto, la cosa si vede rimpicciolita.
Ora vi chiedo se c'è o esiste qualche particolare "codicillo" da applicare per rendere la cosa compatibile con il browser Internet Explorer?
...ma è legato al discorso che avevi iniziato qui:
https://helpcenter.websitex5.com/en/post/158001
?