环境：win10
效果
初始状态：
鼠标移入某个text（比如KS primer）时，text和连接的线条与箭头都变色：
鼠标移出时回复正常。
如果是移入另一种红色的text（比如Cell Sceening Tag），那么该text和连接的线条与箭头都变绿色：
鼠标移出时回复正常。
当然如果移向某个箭头时也可以同步变色。
实现思路
首先，介绍一下我的数据结构。我的razor展示时带一个自定义的对象，该对象有一个公有成员是List<MyObject>，其中MyObject也是自定义的对象，它带的公有成员，可以指定图中text、line和path的相关属性。如下面所示（已简化）。
<svg id="mySvg">
<!-- 此处使用razor里的foreach循环 -->
<g>
<text/>
<line/>
<path/>
</g>
</svg>
现在为MyObject对应的、需要变色的svg子元素增加一个新的属性color-change，将这个属性与MyObject的某个bool成员绑定，以true和false区分子元素的颜色。
以text子元素为例，如果希望增加鼠标移入和移出的效果，可以这样写：
// 先寻找这个属性为true的元素
var texts = document.querySelectorAll("text[color-change=True]");
texts.forEach(function (text) {
// 鼠标移动到上面时修改颜色
text.addEventListener("mouseover", function () {
var id = text.id; // 获取id
setColorforGroup(id, color1);
});
text.addEventListener("mouseout", function () {
var id = text.id;
setColorforGroup(id, color2);
});
});
// 再寻找这个属性为false的元素
var stableTexts = document.querySelectorAll("text[color-change=False]");
// 类似的设置，这里不再赘述
其中setColorforGroup(id, color)是通过确认text的id来确定line和path的id的，只要取到了id，就可以设置成目标颜色。比如：
var textEl = document.getElementById(textId);
textEl.style.fill = color;
这里需要注意的一点是，因为color-change是直接绑定MyObject的某个bool成员，所以这句querySelectorAll("text[color-change=True]");里写的是True，如果不是绑定成员，是固定值（比如<path color-change="true" />），那就要写true了。
