Html 多边形侧面上的SVG onhover事件

我使用SVG多边形创建了一个六边形。现在，我想将onhover事件附加到hexagon的侧面。下面是我如何创建SVG元素的

<svg width="500" height="500" id="svgTry">
<polygon id="polySvg" points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" fill="transparent" stroke="rgb(249, 249, 249)" stroke-width="20" />
</svg>

---

这是针对整个多边形的。我们能在六边形的每一侧创建相同类型的悬停事件吗

您需要将多边形重新创建为六条独立的边。或者更准确地说，是十二条独立的边，因为有两种不同的笔划宽度。你可能希望它们是梯形的，以考虑它们连接处的斜角

这是假设您不想添加代码来计算最接近的多边形大小，并相应地修改SVG。这是很多不必要的工作

更新

有几种方法可以满足您的需求。以下是一种可能更简单的方法：

我们为六条边中的每一条创建一条三角形剪裁路径

下面是应用了剪辑路径的六边形。红色三角形显示剪辑路径的位置

---

您需要将多边形重新创建为六条独立的边。或者更准确地说，是十二条独立的边，因为有两种不同的笔划宽度。你可能希望它们是梯形的，以考虑它们连接处的斜角

这是假设您不想添加代码来计算最接近的多边形大小，并相应地修改SVG。这是很多不必要的工作

更新

有几种方法可以满足您的需求。以下是一种可能更简单的方法：

我们为六条边中的每一条创建一条三角形剪裁路径

下面是应用了剪辑路径的六边形。红色三角形显示剪辑路径的位置

我现在尝试使用6条路径创建六边形。它不像多边形那样清晰。它会在每条路径之间产生间隙，我不知道如何填补它们之间的间隙。例如：<代码>这会在两条路径之间产生一个三角形的间隙。您能帮我解决这个问题吗？您不能用线条来完成。这就是为什么我说你必须为你的每一边创建一个填充形状。我现在尝试使用6条路径创建六边形。它不像多边形那样清晰。它会在每条路径之间产生间隙，我不知道如何填补它们之间的间隙。例如：<代码>这会在两条路径之间产生一个三角形的间隙。您能帮我解决这个问题吗？您不能用线条来完成。这就是为什么我说你必须为你的每一侧创建一个填充形状。

$('#polySvg').on("mouseenter",function(){
this.style['stroke-width'] = 20;
console.log("clicked");
});
$('#polySvg').on("mouseleave",function(){
this.style['stroke-width'] = 30;
console.log("clicked");
});