Interagire con un'immagine .svg

Question

Ho un'immagine nel formato .svg come quella qui sotto.

Voglio fare una pagina web in cui l'utente può interagire con un'immagine come questa, ma con più nodi. La struttura sarà simile a a un albero.

È possibile interagire direttamente con questa immagine .svg utilizzando javascript/html/css?

Se sì, come?

Nota: per interazione intendo la possibilità di fare clic sui nodi, e la pagina Web che lo riconosce, e quando viene selezionato un nodo, il colore degli altri nodi cambia.

Nota2: Ho solo il file .svg, non so se sono in grado di definire questo come inline svg su html.

Nota3: Questa immagine avrà molti nodi (80+), quindi preferirei non dover definire un'area cliccabile per ognuno di essi e così via ... Ma se questa è l'unica soluzione, nessun problema.

Edit: Ecco il contenuto del mio file SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<!-- Generated by graphviz version 2.38.0 (20140413.2041) 
--> 
<!-- Title: g Pages: 1 --> 
<svg width="134pt" height="116pt" 
viewBox="0.00 0.00 134.00 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)"> 
<title>g</title> 
<polygon fill="white" stroke="none" points="-4,4 -4,-112 130,-112 130,4 -4,4"/> 
<!-- a --> 
<g id="node1" class="node"><title>a</title> 
<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"/> 
<text text-anchor="middle" x="27" y="-86.3" font-family="Times New Roman,serif" font-size="14.00">a</text> 
</g> 
<!-- b --> 
<g id="node2" class="node"><title>b</title> 
<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"/> 
<text text-anchor="middle" x="27" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">b</text> 
</g> 
<!-- a&#45;&gt;b --> 
<g id="edge1" class="edge"><title>a&#45;&gt;b</title> 
<path fill="none" stroke="black" d="M27,-71.6966C27,-63.9827 27,-54.7125 27,-46.1124"/> 
<polygon fill="black" stroke="black" points="30.5001,-46.1043 27,-36.1043 23.5001,-46.1044 30.5001,-46.1043"/> 
</g> 
<!-- c --> 
<g id="node3" class="node"><title>c</title> 
<ellipse fill="none" stroke="black" cx="99" cy="-18" rx="27" ry="18"/> 
<text text-anchor="middle" x="99" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">c</text> 
</g> 
<!-- b&#45;&gt;c --> 
<g id="edge2" class="edge"><title>b&#45;&gt;c</title> 
<path fill="none" stroke="black" d="M54,-18C56.6147,-18 59.2295,-18 61.8442,-18"/> 
<polygon fill="black" stroke="black" points="61.9297,-21.5001 71.9297,-18 61.9297,-14.5001 61.9297,-21.5001"/> 
</g> 
</g> 
</svg> 

Answer 1

L'SVG dovrebbe essere in linea per avere l'interazione su una pagina. Se si incorpora un'immagine, l'immagine (.svg) viene trattata come un singolo oggetto. Per l'SVG in linea ogni nodo dovrebbe avere un ID separato se si desidera selezionarli singolarmente.

Ecco uno che ho creato per un'altra risposta.

svg { 
 
    display: block; 
 
    width: 20%; 
 
    margin: 25px auto; 
 
    border: 1px solid grey; 
 
    stroke: #006600; 
 
} 
 
#buttons polygon:hover { 
 
    fill: orange; 
 
} 
 
#buttons rect:hover { 
 
    fill: blue 
 
} 
 
#center { 
 
    fill: #00cc00; 
 
} 
 
#top { 
 
    fill: #cc3333; 
 
} 
 
#right { 
 
    fill: #663399; 
 
} 
 
#left { 
 
    fill: #bada55; 
 
}

<svg viewbox="0 0 100 100"> 
 
    <g id="buttons"> 
 
    <rect id="center" x="25" y="25" height="50" width="50" /> 
 
    <polygon id="top" points="0,0 100,0 75,25 25,25" /> 
 
    <polygon id="right" points="100,0 75,25 75,75 100,100" /> 
 
    <polygon id="bottom" points="0,100 25,75 75,75 100,100" /> 
 
    <polygon id="left" points="0,0 25,25 25,75 0,100" /> 
 
    </g> 
 
</svg>

Answer 2

linea svg elementi possono interagire come gli altri elementi HTML, è possibile impostare le regole CSS su di loro e applicare js anche su di essi, Non hai bisogno di aree

Answer 3

svg è un linguaggio di markup, il che significa che è possibile utilizzare le librerie dei selettori css come jQuery per interagire con il data svg. Puoi interrogare lo svg per ottenere un elemento con il suo id, o ottenere una matrice di elementi selezionati per classe. È possibile associare ad essi gestori di eventi come click, mouseover, mouseenter, ecc. È possibile persino ridimensionarli con css.

Answer 4

Non è necessario necessariamente avere lo svg in linea, è possibile averlo in un tag dell'oggetto.

Così l'HTML sarebbe simile ...

<div id="svgdiv"> 
    <object id="svgobject" data="objectclicktest.svg"></object> 
    </div> 

e correspending js

var mySvg = document.getElementById("svgobject").contentDocument.querySelectorAll('svg'); 

    var myNodes = mySvg[0].querySelectorAll('.node'); 

    for(var i = 0; i < myNodes.length; i++) { 
      myNodes[i].addEventListener('click', changeStyle); 
    } 

    function changeStyle() { 
      this.style.fill="blue"; 
    } 

Example Clicca sulle lettere e dovrebbero andare blu. Nota, (non credo che funzionerebbe in una configurazione come un violino)