与 .svg 图像交互

Question

我有一张 .svg 格式的图片，如下图所示。

我想制作一个网页，用户可以在其中与这样的图像进行交互，但具有更多节点。该结构将与一棵树相似。

是否可以使用 javascript/html/css 直接与此 .svg 图片进行交互？

如果是，怎么做？

Note: By interact I mean being able to click on the nodes -and the webpage recognizing it- and when one node is selected the color of the other nodes change.

注意 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元素可以像其他html元素一样交互，你可以在它们上设置css规则并在它们上应用js，你不需要区域

Answer 2

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

和对应的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 点击字母，它们应该变成蓝色。请注意，（我认为这不会在像小提琴这样的设置中起作用）