Hover эффект для SVG +CSS+JS

355

21 апреля 2017, 20:11

Есть огромная svg карта, разбитая по регионам (регионы различной формы) с расстояниями между ними, и у каждой такой картинки внутри svg есть слой со штриховкой. Смысл в том, что необходимо, чтобы при наведении на основную область появлялась его штриховка. Это сделал без проблем - расставил классы и id к элементам и накат js-ину, с этим все хорошо.

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

svg пришла из Adobe Illustrator

Структура svg вкратце:

<svg>
    <image id="картинка_1"></image>
    <image id="картинка_1_штрих"></image>
    <image id="картинка_2"></image>
    <image id="картинка_2_штрих"></image>
    <image id="картинка_3"></image>`
    <image id="картинка_3_штрих"></image>`
</svg>

Как можно реализовать, чтобы наведение отрабатывало на границе самого рисованного изображения, и какие предложения с положением слоев? Или есть какое то другое решение задачи?

Заранее спасибо

Answer 1

Нужно их обтравить по контуру (например, в том-же редакторе), чтобы в результате вышло так:

<svg>
    <defs>
        <clipPath id="clipPath42" clipPathUnits="userSpaceOnUse">
          <path d="M 53.570373,64.753154 ... 52.629864,87.984291 Z" />
        </clipPath>
    </defs>
    <g clip-path="url(#clipPath42)"> //Эта группа с обтравочным контуром точно ловит указатель мыши
         <image id="картинка_1"></image>
         <image id="картинка_1_штрих"></image>
    </g>
</svg>

Рабочий пример:

g:hover image{ 
   opacity:0.5; 
}

<svg 
   version="1.1" 
   viewBox="0 0 110.8986 132.20711" 
   width="110.8986mm" 
   height="132.20711mm"> 
  <defs 
     id="defs8"> 
    <clipPath 
       id="clipPath3620" 
       clipPathUnits="userSpaceOnUse"> 
      <path 
         id="path3622" 
         d="M 53.570373,64.753154 35.55287,74.204772 33.457388,125.95303 77.225261,153.6423 123.08809,129.58279 124.24306,101.06618 96.397215,115.67356 52.629864,87.984291 Z" 
       /> 
    </clipPath> 
    <clipPath 
       id="clipPath3638" 
       clipPathUnits="userSpaceOnUse"> 
      <path 
         
         id="path3640" 
         d="M 144.35599,39.86589 142.26043,91.614165 96.397331,115.6735 52.62979,87.984551 54.725348,36.236276 100.58845,12.176946 Z" /> 
    </clipPath> 
  </defs> 
  
  <g 
     transform="translate(-33.457388,-18.202286)" 
     clip-path="url(#clipPath3638)" 
     id="g3636"> 
    <image 
       xlink:href="https://placeimg.com/640/430/any" 
       transform="scale(-1)" 
       width="217.2583" 
       height="93.110695" 
       preserveAspectRatio="none" 
       id="image3632" 
       x="-194.15256" 
       y="-111.31298" /> 
  </g> 
  <g 
     transform="translate(-33.457388,-18.202286)" 
     clip-path="url(#clipPath3620)" 
     id="g3618"> 
    <image 
       xlink:href="https://placeimg.com/640/480/any" 
       width="202.97307" 
       height="86.988457" 
       preserveAspectRatio="none" 
       id="image3614" 
       x="-3.1816039" 
       y="63.420933" /> 
  </g> 
</svg>

Answer 2

Вот здесь есть пример такои карты с исходниками Интерактивная карта и демо Демо. Всё описано подробно.

По идее карта (рисунок) "разбирается" на сектора (регионы) в иллюстраторе и потом по этим регионам (координатам) создается уже скрипт