Nicola M.

User

Assegnare un link ad oggetto in svg

Autore: Nicola M.

Visite 1513, Followers 1, Condiviso 0

Parole Chiave: link,svg,website x5 professional 13

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>

#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>

</head>

<body>

</g>

</g>

</svg>

Postato il 31/10/2016 21:05:51

3 RISPOSTE

‪ KolAsim ‪ ‪

Moderator

... per assegnare un link ad una immagine SVG basterebbe usare il metodo tradizionale:

... per eventualmente valutare il tuo codice, postane la fonte...

Postato il 01/11/2016 20:21:24 da ‪ KolAsim ‪ ‪

Nicola M.

User
Autore

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?

Postato il 02/11/2016 11:48:57 da Nicola M.

Claudio D.

Moderator

...ma è legato al discorso che avevi iniziato qui:

https://helpcenter.websitex5.com/it/post/158001

Postato il 02/11/2016 13:07:00 da Claudio D.