如何为矩形上的文本添加SVG悬停事件？
为矩形上的文本添加SVG悬停事件，可以使用SVG的<rect>元素和<text>元素结合，并通过CSS样式和JavaScript来实现。以下是一个简单的步骤：
- 创建一个SVG容器，可以使用
<svg>标签，并设置宽度和高度。 - 在SVG容器中创建一个矩形，可以使用
<rect>标签，并设置矩形的位置、宽度、高度和样式。 - 在SVG容器中创建一个文本元素，可以使用
<text>标签，并设置文本的位置、内容、样式和事件。 - 使用CSS样式来定义矩形和文本的样式，可以使用
<style>标签或者外部CSS文件。 - 使用JavaScript来添加悬停事件，可以使用
addEventListener方法监听鼠标悬停事件，并在事件处理函数中添加相应的操作，比如改变矩形或文本的样式、显示提示信息等。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
rect {
fill: blue;
stroke: black;
}
text {
fill: white;
pointer-events: none;
}
</style>
</head>
<body>
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="50"></rect>
<text x="75" y="75">Hello World</text>
</svg>
<script>
var textElement = document.querySelector('text');
var rectElement = document.querySelector('rect');
rectElement.addEventListener('mouseover', function() {
textElement.style.fill = 'red';
});
rectElement.addEventListener('mouseout', function() {
textElement.style.fill = 'white';
});
</script>
</body>
</html>在上述代码中，我们创建了一个200x200的SVG容器，然后在容器中创建了一个蓝色矩形和一个白色文本。通过CSS样式设置了矩形和文本的样式，其中文本设置了pointer-events: none;来禁止文本接收鼠标事件。
接着使用JavaScript为矩形添加了mouseover和mouseout事件，当鼠标悬停在矩形上时，文本的颜色会变为红色，当鼠标移出矩形时，文本颜色恢复为白色。
这样就实现了为矩形上的文本添加SVG悬停事件。
相关·内容
我有一个包含文本的多个矩形的SVG。当悬停在矩形上时，我希望有一个小阴影。因为不能在rect元素中添加文本，所以我将其添加到之后，这意味着文本实际上显示在矩形的顶部，所以当我将鼠标悬停在文本上时，阴影不会显示。 因为text在rect之后，所以我不能使用同级选择器。这是我想要
浏览 25提问于2021-10-18得票数 0
回答已采纳
svg中有两个带有in的矩形-“蓝色”和“透明”。透明的反作用角在蓝色上方。>我将鼠标悬停在透明矩形上的事件关联起来，以显示工具提示文本，即“透明”。现在，我有一个要求，当用户将鼠标放在透明矩形上时，事件应该在透明矩形上执行，但是当用户单击透明矩形和蓝色矩形之间的</
浏览 0提问于2020-12-15得票数 0
我有一个“可缩放”的SVG矩形，其中包含一行较小的矩形。我想要显示这些小矩形的工具提示，但由于“可缩放”矩形的以下代码，我无法将鼠标悬停在小矩形上以显示工具提示： .attr("width", widthcall(d3.zoom()
.sca
浏览 13提问于2017-08-12得票数 1
回答已采纳
我有一个在d3中实现的悬停效果，它选择一个svg中的几个矩形并更改它们的颜色： .duration(1000)我只想一次在一个矩形上操作这个效果。如果我快速地悬停在几个矩形上是接近连续的，那么这个
浏览 1提问于2014-04-07得票数 0
回答已采纳
1回答
我正在开始一个新项目，主要目的是学习一些基本的d3.js。这是我的玩具问题:我想画一个有几个矩形的交互式流程图，当用户在其中一个上徘徊/点击时，我想用箭头指向场景中的其他矩形来显示依赖关系。我还想在其他地方显示一些文本，条件是这个用户操作。
以下是我的出发点，受到一些基本教程的启发：<!content"
浏览 3提问于2017-08-04得票数 1
这是我的stackblitz/codepen：为什么要这样？OnMouseOver是为svg元素注册的，如下所示：
return <svg</e
浏览 0提问于2018-07-11得票数 0
回答已采纳
我有一个条形图，基本上是一个导航元素，所以我需要在条形图上简单可预测的翻转行为。从本质上讲，我需要确保小的栏和大的栏一样容易点击，所以我把整个列变成了一个可点击的翻转栏。下面是我提到的行为的一个例子：
我曾尝试使用d3和svg来实现这一点，但发现很难管理svg元素和div(或svg元素和其他svg元素，老实说，我忘记了这是症结所在的确切性质)之间的z索引。但我记
浏览 0提问于2012-01-14得票数 1
回答已采纳
2回答
我有几个带有悬停效果的svg矩形，当鼠标悬停在矩形上时，矩形的背景颜色会发生变化。悬停效果是通过css设置的： fill: rgb(255,128,0);除此之外，文本被放置在每个矩形的上方。一对文本和矩形定义一个组。，但前提是光标不在文本<em
浏览 0提问于2012-08-22得票数 1
回答已采纳
我在svg元素中添加了9个矩形。如何将单击事件添加到每个事件中？", "black", "red", "green", "gray", "navy", "orange", "teal"];
var svg= main.append(&qu
浏览 2提问于2014-08-04得票数 3
回答已采纳
3回答
因此，我有一个简单的SVG元素(复制如下)，并希望在带有bar类的矩形悬停在其上时显示文本(当前在data-label属性中)。<svg width="511" height="15">
<rect fill="#555555" height="15" stroke="#000000" width="510"
浏览 45提问于2017-01-21得票数 11
回答已采纳
我在这里试着理解一些东西： 我有两个相叠的长方形。底部的矩形正在侦听“mouseover”事件。这个矩形的一半被另一个矩形覆盖。 将鼠标移到第一个矩形上时，将触发mouseover事件。将鼠标移到顶部的第二个矩形上时，不会触发鼠标悬停事件。 有没有办法“告诉”第二个矩形“传递”鼠标悬停
浏览 12提问于2019-03-15得票数 1
回答已采纳
1回答
目标我的尝试
我只是将对象添加为SVG元素的一个新属性。我看得出来它是加起来的，好吧。然后使用d3的.on函数附加事件
浏览 3提问于2014-05-26得票数 1
回答已采纳
7回答
我有一系列的svg矩形(使用D3.js)，我想在鼠标悬停时显示一条消息，该消息应该被一个作为背景的框所包围。它们应该彼此完全对齐，并且与矩形(在顶部和居中)完全对齐。做这件事最好的方法是什么？我尝试使用"x“、"y”、"width“和"height”属性添加一个svg文本，然后添加一个svg rect。问题是，文本的
浏览 2提问于2012-05-18得票数 106
回答已采纳
2回答
我在我的Mvc应用程序中同时使用了SVG和jQuery。我在页面上画了一系列矩形，我想要做的是为每个矩形附加一个单击或鼠标悬停事件，比如弹出一个警告框。;但遗憾的是，这些事件都没有真正对此控件起作用。有人知道怎么做吗？编辑：<script type="text/javascript">
浏览 0提问于2010-10-30得票数 15
回答已采纳
2回答
我有两个SVG矩形，其中一个逻辑上在x和y位置上位于另一个之上。现在，当您将鼠标悬停在顶部的rect上时，我希望它下面的rect成为事件的目标。但是如果我在上面的矩形上按下鼠标，我希望它成为目标。这种基于事件类型的不同功能使得css的“指针事件”属性对我来说没有用处。
我如何才能做到这一点呢？
浏览 0提问于2010-09-30得票数 0
回答已采纳
我正在尝试获取svg:text元素的鼠标事件。我注意到的是，.on("click", ...)可以工作，但其他事件，如"mouseover"、"mousemove"和"mouseout"不能工作。查看示例，我发现所采取的方法是将文本与不可见的svg:rect覆盖起来，并将事件分配给它。这是好的，如果有一
浏览 1提问于2012-08-03得票数 4
回答已采纳
1回答
将指针事件限制为SVG文本填充
、、、、
我需要将SVG元素中的指针事件限制为仅填充文本。我不希望当用户在文本周围的矩形中时触发指针事件，而只在光标实际位于字符内部时触发。SVG指针事件"fill“应该可以工作，但由于某些原因，它不能工作。在下面的示例中(jsfiddle here：)，当光标位于单词之间时，指针事件被激活。我希望指针事件仅在鼠标直接位于字符填充的顶部时触发：<
浏览 1提问于2015-03-20得票数 0
2回答
我试图添加一个链接到这个D3可视化的文本元素：
nodeEnter.append("svg:text") .attrd.nam
浏览 6提问于2012-12-05得票数 4
回答已采纳
1回答
我在d3.js (fiddle)中的一个简单动画中遇到了问题 我的目标是当鼠标悬停在红色方块上时，圆圈向下移动50个像素。 当光标悬停在红色方块右上角/左上角的圆上方时，圆将平滑过渡。但是，当我的光标悬停在红色正方形左下角的圆圈内或圆圈下方时，圆圈要么停止移动，要么根本不移动。 我想这与我的动画功能有关。下面是一段代码： const svg = d3.select('
浏览 33提问于2020-12-29得票数 1
回答已采纳
1回答
<svg height="300px" width="600px" xmlns="http://www.w3.org/2000/svg"> <text style="stroke: rgb(0, 0, 0);stroke-width: 1;" x="390&
浏览 0提问于2013-04-15得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
