与.svg图像交互

Question

我的图像格式为.svg，如下图所示。

我想创建一个网页，用户可以在这个网页上与这样的图像进行交互，但需要更多节点。该结构将类似于树。

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

如果是，怎么做？

注意：通过交互，我的意思是能够点击节点 - 以及识别它的网页 - 当选择一个节点时，其他节点的颜色会发生变化。

注意2：我只有.svg文件，我不知道我能否在html上将其定义为内联svg。

注意3：这个图像将有许多节点（80+），所以我宁愿不必为每个节点定义一个可点击区域等等......但如果这是唯一的解决方案，没问题。 / p>

修改 这是我的.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。

这是我为另一个答案创建的那个。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

内联svg元素可以像其他html元素一样进行交互，你可以在它们上设置css规则并在它们上面应用js，你不需要区域

Answer 3

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

Answer 4

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