Question

我使用SVG多边形创建了一个六边形。现在，我想在六边形的边上附上onhover事件。下面是我创建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");
});

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

Answer 1

您需要将多边形重新创建为六个单独的边。或者，更准确地说，十二个单独的侧面，因为有两个不同的行程宽度。你可能希望它们是梯形的，以便考虑到它们加入的倾斜角度。

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

<强>更新

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

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

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

我们现在又有了一个六边形。但是每个侧面都可以使用悬停规则来改变其笔划宽度。

＆＃13;

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

＆＃13;

<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>

＆＃13;

这接近你想要的吗？

为简单起见，我使用与六边形相同的坐标构建了剪辑路径。然而，这意味着中风的外半部分被剪掉了。所以我们只看到一半的线。这就是为什么当你盘旋时，中风只会变得更厚。如果你想解决这个问题，你需要更新剪辑三角形，使它们稍微超出六边形的外部。

多边形边上的SVG onhover事件

1 个答案: