ASP.NET MVC-razor编写-2-svg中使用js+添加事件监听

陆沙

已于 2024-07-05 17:17:38 修改

阅读量635

点赞数 9

分类专栏： ASP.NET 文章标签： mvc javascript asp.net razor

于 2024-07-05 17:07:05 首次发布

本文链接：https://blog.csdn.net/pxy7896/article/details/140210554

版权

ASP.NET 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

环境：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了。