如何为矩形上的文本添加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悬停事件。