環境：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; // 獲取idsetColorforGroup(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了。
