如何让SVG图片的Hitbox匹配图形自身形状而非方形？

你的SVG带有曲线和边角，但用<img>或<object>引用时Hitbox始终是方形，无法匹配图形本身形状，想要实现鼠标悬停高亮且Hitbox贴合图形，可以通过以下两种方法解决：

方法1：直接在HTML中嵌入SVG代码 #

将SVG的源代码直接插入HTML，而非通过<img>或<object>引用，这样能直接针对SVG内部的图形元素设置交互样式：

修改后的HTML示例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="home.css">
    <script defer src="index.js"></script>
    <title>asdasd</title>
    <style>
        /* 给SVG图形设置悬停高亮 */
        .svg-shape:hover {
            fill: #ffcc00; /* 替换为你需要的高亮颜色 */
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-content">
        <div class="dropdown">
            <img src="../Icons/menu.png" class="menu">
            <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
        </div>
        <img src="Imgs/logo.jpeg" class="logo">
    </div>
</div>
<main>
    <!-- 直接嵌入SVG代码，替换为你的SVG内容 -->
    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <path d="M100,20 Q150,50 180,100 Q150,150 100,180 Q50,150 20,100 Q50,50 100,20Z" class="svg-shape" fill="#4287f5"/>
    </svg>
</main>
</body>
</html>

方法2：修改SVG文件内部添加交互逻辑 #

如果不想嵌入代码，可直接在SVG文件中添加样式：

1. 打开你的SVG文件，在<svg>标签内插入样式块：

<style>
    .svg-shape:hover {
        fill: #ffcc00;
        cursor: pointer;
    }
</style>

2. 给SVG内的所有目标图形元素（如<path>、<circle>）添加class="svg-shape"
3. 确保SVG的viewBox属性正确设置，保证图形坐标系统准确

之后用<object>引用该SVG时，悬停效果会生效，Hitbox也会贴合图形形状。

关键注意事项 #

• 避免用<img>引用需要交互的SVG：<img>会将SVG视为位图，无法访问内部元素，Hitbox只能是矩形容器。
• 正确设置viewBox：这是保证Hitbox准确匹配图形的前提，确保SVG的坐标系统与图形尺寸匹配。

内容的提问来源于stack exchange，提问作者Obariski