多边形两侧的 SVG 悬停事件

Question

我使用 SVG 多边形创建了一个六边形。现在，我想在六边形的侧面附加悬停事件。下面是我创建 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>

我试过了

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

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

Answer 1

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

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

更新

有几种方法可以做你想做的事。这是一种可能更简单的方法：

1. 我们为六个边中的每一个创建一个三角形剪切路径。

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

<svg width="500" height="500" id="svgTry">

  <defs>
    <clipPath id="cp1">
      <polygon points="150,150, 150,0, 285,75"/>
    </clipPath>
  </defs>

  <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0"
           fill="transparent" stroke="rgb(49, 249, 249)" stroke-width="20"
           clip-path="url(#cp1)"/>

  <polygon points="150,150, 150,0, 285,75" fill="red" opacity="0.2"/>

</svg>

1. 现在，如果我们再创建五个剪切路径 - 一个与其他五个边中的每一个匹配。我们再添加五个六边形副本，每个副本都应用了一个新的剪辑路径。

<svg width="500" height="500" id="svgTry">

  <defs>
    <clipPath id="cp1">
      <polygon points="150,150, 150,0, 285,75"/>
    </clipPath>
    <clipPath id="cp2">
      <polygon points="150,150, 285,75, 285,225"/>
    </clipPath>
    <clipPath id="cp3">
      <polygon points="150,150, 285,225, 150,300"/>
    </clipPath>
    <clipPath id="cp4">
      <polygon points="150,150, 150,300, 15,225"/>
    </clipPath>
    <clipPath id="cp5">
      <polygon points="150,150, 15,225, 15,75"/>
    </clipPath>
    <clipPath id="cp6">
      <polygon points="150,150, 15,75, 150,0"/>
    </clipPath>
  </defs>

  <g id="sides" fill="transparent" stroke="rgb(49, 249, 249)" stroke-width="20">
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp1)"/>
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp2)"/>
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp3)"/>
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp4)"/>
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp5)"/>
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp6)"/>
  </g>

</svg>

1. 我们现在又得到了一个六角形。但是可以使用悬停规则来定位每个边以更改其笔划宽度。

#sides polygon:hover {
  stroke-width: 40;
}

<svg width="500" height="500" id="svgTry">

  <defs>
    <clipPath id="cp1">
      <polygon points="150,150, 150,0, 285,75"/>
    </clipPath>
    <clipPath id="cp2">
      <polygon points="150,150, 285,75, 285,225"/>
    </clipPath>
    <clipPath id="cp3">
      <polygon points="150,150, 285,225, 150,300"/>
    </clipPath>
    <clipPath id="cp4">
      <polygon points="150,150, 150,300, 15,225"/>
    </clipPath>
    <clipPath id="cp5">
      <polygon points="150,150, 15,225, 15,75"/>
    </clipPath>
    <clipPath id="cp6">
      <polygon points="150,150, 15,75, 150,0"/>
    </clipPath>
  </defs>

  <g id="sides" fill="transparent" stroke="rgb(49, 249, 249)" stroke-width="20">
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp1)"/>
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp2)"/>
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp3)"/>
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp4)"/>
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp5)"/>
    <polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp6)"/>
  </g>

</svg>

这接近你想要的吗？

请注意，为简单起见，我使用与六边形相同的坐标构建了剪辑路径。然而，这意味着笔画的外半部分被剪掉了。所以我们只看到了一半。这就是为什么当您悬停时，笔触只会在内部变粗。如果你想解决这个问题，你需要更新剪辑三角形，使它们稍微超出六边形的外侧。