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

- Xaphanius

---

如果您什么都不知道，最好从一本书开始，而不是一个非常普遍的问题。请尝试访问此链接：http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html - Robert Longson

谢谢你的建议。到目前为止，我只是在考虑与SVG图像交互会有多复杂。我甚至不确定我是否真的会做我想做的事情。而且，我计划要做的并不是很复杂，我只需要知道哪些节点被选中，并根据此更改一些节点的颜色。在查看@Paulie_D的代码后，我可能会在这个周末尝试一下。 :) - Xaphanius

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>

- Paulie_D

---

好的，你知道如何以自动化的方式将这个 .svg 文件转换为内联 svg 吗？ - Xaphanius

我原以为你已经有了一个SVG文件...为什么还需要转换它呢？ - Paulie_D

我刚刚在问题上发布了SVG内容。它似乎与你在这里发布的内容风格非常不同（即使是两个不同的图像）。这就是为什么我认为我需要进行转换的原因。 - Xaphanius

我的是手写的，而不是生成的，所以可能会更整洁一些。有在线的SVG优化工具可以为您完成这项工作。- http://jsfiddle.net/jLnzc906/2/ - Paulie_D

我认为你可以在对象标签中与SVG进行交互，因此它不仅适用于内联元素（据我所知）。 - Ian

Answer 2

您不一定需要将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";
    }

示例 点击字母，它们应该变成蓝色。请注意，（我认为这在像fiddle这样的设置中不起作用）

- Ian

Answer 3

内联SVG元素可以像其他HTML元素一样进行交互，您可以对它们设置CSS规则并在其上应用JS，而不需要使用区域。

- Pepo_rasta

Answer 4

SVG 是一种标记语言，这意味着您可以使用 CSS 选择器库（如 jQuery）与给定的 SVG 进行交互。您可以查询 SVG 以按其 ID 获取元素，或获取由类选择的元素数组。您可以附加事件处理程序，例如 click、mouseover、mouseenter 等等。您甚至可以使用 CSS 对它们进行样式设置。

- taxicala

---

即使我只有 .svg 文件，也可以吗？另外，您能否发布一个代码片段，以显示如何查询 svg 以获取其中的元素？ - Xaphanius