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

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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