與.svg圖像交互

Question

我有一個格式爲.svg的圖像，如下所示。

我想打一個網頁，用戶可以用這樣的圖像互動，但更多的節點。該結構將類似於樹。

是否可以使用javascript/html/css直接與此.svg圖像交互？

如果是這樣，怎麼樣？

注意：通過交互，我的意思是能夠點擊節點並識別網頁 - 當選擇了一個節點時，其他節點的顏色會發生變化。注意2：我只有.svg文件，我不知道是否可以將它定義爲html上的內聯svg。注意3：這個圖像將有很多節點（80+），所以我寧願不必爲每個節點定義一個可點擊的區域，等等......但是如果這是唯一的解決方案，沒有問題。

編輯： 這裏是我的.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

SVG需要內聯才能在頁面上進行交互。如果您嵌入圖像，則圖像（.svg）將被視爲單個對象。對於內聯SVG，如果要單獨選擇它們，每個節點都應該有一個單獨的ID。

這是我爲另一個答案創建的一個。

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

聯SVG元素可以像其他HTML元素交互，可以對它們設置的CSS規則和將它們應用JS太多，你不需要區域

Answer 3

SVG是一種標記語言，這意味着您可以使用CSS選擇器庫，如jQuery與給定的SVG交互。你可以通過查詢svg來獲得一個元素的ID，或者獲取一個由類選擇的元素數組。您可以將事件處理程序附加到它們，例如click,mouseover,mouseenter等，您甚至可以使用CSS對它們進行樣式設置。

Answer 4

你不一定需要svg內聯，你可以在對象標籤中使用它。

所以HTML會是什麼樣子......

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

和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點擊字母，他們應該去的藍色。請注意，（我不認爲這可以在像小提​​琴那樣的設置中工作）