2

Есть огромная 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>

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

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

1

2 ответа 2

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>

0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.