SVG событие на сторонах многоугольника

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");
});

Это для всего многоугольника.Можем ли мы создать одно и то же событие на каждой стороне шестиугольника?

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>

Теперь, если мы создадим еще пять обтравочных контуров - по одному на каждую из пяти сторон.Мы добавляем еще пять копий шестиугольника, каждый с одним из примененных новых путей клипов.

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

Теперь у нас снова есть шестиугольник.Но на каждую из сторон может быть наведено правило наведения, чтобы изменить ширину своего хода.

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

Это близко к тому, что вы хотите?

Обратите внимание, для простоты я построил пути отсечения, используя те же координаты, что и шестиугольник.Однако это означает, что внешняя половина хода обрезается.Таким образом, мы видим только половину линии.Вот почему при наведении курсора внутри становится только толще.Если вы хотите это исправить, вам нужно обновить треугольники клипов так, чтобы они немного выходили за пределы шестиугольника.