查看“︁茄”︁的源代码

<html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>交互 SVG 示例</title>
<style>
  #tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #aaa;
    padding: 4px 8px;
    border-radius: 4px;
    display: none;
    pointer-events: none;
    font-size: 14px;
  }
  svg circle {
    cursor: pointer;
    transition: fill 0.2s;
  }
  svg circle:hover {
    fill: orange;
  }
</style>
</head>
<body>

<svg width="400" height="300" style="border:1px solid #ccc;">
  <!-- 圆形标记 -->
  <circle cx="100" cy="150" r="30" fill="blue" data-info="这里是圆形 🐱"></circle>
  <circle cx="250" cy="100" r="40" fill="green" data-info="这里是大圆 🌸"></circle>
  <circle cx="300" cy="200" r="25" fill="red" data-info="这里是小圆 🌟"></circle>
</svg>

<div id="tooltip"></div>

<script>
const tooltip = document.getElementById('tooltip');
const circles = document.querySelectorAll('svg circle');

circles.forEach(circle => {
  circle.addEventListener('mousemove', e => {
    tooltip.style.left = (e.pageX + 10) + 'px';
    tooltip.style.top = (e.pageY + 10) + 'px';
    tooltip.innerHTML = circle.getAttribute('data-info');
    tooltip.style.display = 'block';
  });
  circle.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
  });
});
</script>

</body>
</html>