TransWikia.com

Разбитие изображения на сектора

Stack Overflow на русском Asked by Qtq on August 30, 2021

пример картинки

Есть картинка на сайте, и нужно разбить её на сектора, чтобы у каждого сектора был свой ивентбокс(или что-то подобное), чтобы при нажатии на разные сектора открывались разные ссылки и создавался эффект, что этот сектор поднимается над остальными.
Какие есть варианты реализации?

2 Answers

Практическое решение

  1. Загружаем изображение в векторный редактор, установив параметры viewBox равными габаритным размерам изображения головы.

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="676" height="872" viewBox="0 0 676 872" preserveAspectRatio="xMinYMin meet">
<image xlink:href="https://i.stack.imgur.com/QW79B.jpg" width="100%" height="100%" />
</svg>   

  1. В векторном редакторе, с помощью инструмента "Рисовать кривые Безье", наносим по контурам каждого сегмента изображения узловые точки.

введите сюда описание изображения

  1. Сохраняем и оптимизируем файл *.svg, должно получится 10 path.
  2. Обертываем каждый path ссылкой
<a xlink:href="https://ru.stackoverflow.com/questions">
     <path  class="head" stroke="black" d="m163.3 33.3c15.9-11.6 26-13.6 39.8-18.3 13.3-4.5 27.3-6.7 41.2-9.1 13.6-2.4 27.3-4.5 41.2-5.2 15.4-0.8 30.9 0.4 46.4 1.3 16.6 1 33.2 2.4 49.6 4.6 12.5 1.7 24.8 4.2 37.2 6.5 10.9 2 21.9 3.7 32.7 6.5 10.9 2.8 32 10.5 32 10.5 0 0-11.3 10.1-20.9 15-12.9 6.7-35.4 16.7-101.2 20.2-23.7 1.3-47.5 2.7-71.2 2-19.9-0.6-40-1.2-59.4-5.2-13.7-2.8-27.1-7.4-39.8-13.1-9.6-4.3-17.5-7-27.4-15.7z" /> 
</a>  
  1. Добавляем стили и скрипт, которые обеспечиваю визуальные эффекты увеличения и переход по ссылке после клика по определенному сегменту

d3.selectAll('path').on('click', function() {
  d3.select(this.parentNode).raise();
})
.head {
    fill: transparent;
    stroke: white;
    transform-origin: center center;
    transform-box: fill-box;
    transition: 1s;
  }
  
  :hover.head {
    fill: #74C7FD;
    stroke: grey;
    opacity:0.75;
    stroke-width: 4px;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 999;
  }
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="676" height="872" viewBox="0 0 676 872" preserveAspectRatio="xMinYMin meet" border="1">
     
   <image xlink:href="https://i.stack.imgur.com/QW79B.jpg" width="100%" height="100%" />
  
  <a xlink:href="https://ru.stackoverflow.com/users/323813/qtq">
     <path  class="head" stroke="black" d="m163.3 33.3c15.9-11.6 26-13.6 39.8-18.3 13.3-4.5 27.3-6.7 41.2-9.1 13.6-2.4 27.3-4.5 41.2-5.2 15.4-0.8 30.9 0.4 46.4 1.3 16.6 1 33.2 2.4 49.6 4.6 12.5 1.7 24.8 4.2 37.2 6.5 10.9 2 21.9 3.7 32.7 6.5 10.9 2.8 32 10.5 32 10.5 0 0-11.3 10.1-20.9 15-12.9 6.7-35.4 16.7-101.2 20.2-23.7 1.3-47.5 2.7-71.2 2-19.9-0.6-40-1.2-59.4-5.2-13.7-2.8-27.1-7.4-39.8-13.1-9.6-4.3-17.5-7-27.4-15.7z" /> 
    </a>  
     <a xlink:href="https://ru.stackoverflow.com/questions"> 
  <path id="h02" class="head"  d="M147.6 43.8C136.3 50 126.2 56.9 115.9 64.1 105.7 71.3 95.4 78.5 86.2 86.9 75.8 96.5 66.1 107 57.5 118.2c-6.2 8-11.8 16.5-16.3 25.5-5.5 10.9-9.1 22.7-13.1 34.3-5.3 15.2-10 30.6-14.4 46-3.4 11.9-6.9 23.8-9.1 35.9C2.1 273.3 0 300.5 0 300.5c0 0 3.2 32.1 7.2 47.7 3.9 15.5 8.7 31 16.3 45.1 7.4 13.6 16.6 26.6 28.1 36.9 12.9 11.5 15.7 13.4 15.7 13.4 27.7 12.3 58.8 15.8 88.8 19.6 18.4 2.3 55.5 2 55.5 2 0 0-15.3-19.5-20.2-30.7-4.3-9.7-6.5-20.2-7.8-30.7-1.9-14.9-2.8-30.3 0-45.1 2.7-13.8 7.6-27.6 15.7-39.2 8.7-12.5 20.8-22.9 34-30.7 12.5-7.3 23.8-10.5 41-14.1 3.2-59.4 3.4-190.3 3.4-190.3 0 0-27.5-1.9-41.2-3.9-10.6-1.6-21.2-3.4-31.4-6.5-10.2-3.2-20-7.5-29.4-12.4-9.8-5.1-17-15.1-28.1-17.6z" />
</a> 
  <a xlink:href="https://ru.stackoverflow.com/questions">
<path id="h03" class="head"  d="m299.8 80.4c39.7-2.5 47.9-3.4 71.8-5.2 21.3-1.6 45.1-6.7 64-5.2 24.5 67.8 41.7 113.8 58.1 163.3-4.6 5.9-11.1 11.5-15 18.3-4.3 7.5-6.6 15.9-9.1 24.2-2.4 7.7-4.8 15.5-5.9 23.5-1 7.6-0.9 15.5-0.7 22.9-23.8 2.2-52.4 4.4-85.3 6.8-2.3-6.4-3.6-11.4-6.5-16.6-4.1-7.5-9.1-14.8-15.2-20.8-5-4.8-10.9-8.6-17.1-11.5-7-3.3-14.7-4.6-22.2-6.5-7.6-2-14.6-2.6-23.1-5.1 2.2-49 1-125.2 6.1-188z" />
</a>

<a xlink:href="https://ru.stackoverflow.com/questions">
<path id="h04" class="head"  stroke="black" d="m450.7 66.6c5.5-1.4 13.3-3.1 19.6-5.6 6.2-2.4 12.2-5.4 18-8.8 6.2-3.7 12.2-7.9 17.6-12.7 6.4 3.5 10.8 6.8 16 10.5 5.2 3.7 10.4 7.4 15.3 11.4 6.4 5.3 12.7 10.8 18.6 16.7 4.5 4.5 8.8 9.3 12.7 14.4 5.6 7.3 10.6 15 15.3 22.9 2.9 4.8 5.5 9.7 7.8 14.7 2.6 5.6 4.6 11.5 6.9 17.3 2.2 5.9 4.8 11.6 6.5 17.6 1.7 6.1 2.8 13.6 3.6 18.6-3.6 0.5-8.7 0.4-13.1 1-4.4 0.5-8.7 1.3-13.1 2.3-4.8 1.1-9.6 2.7-14.4 3.9-5.2 1.4-10.5 2.3-15.7 3.9-5.9 1.9-11.6 4.4-17.3 6.9-5 2.1-10 4.1-14.7 6.9-6 3.5-10.1 8.2-17 12.1-13.4-37.1-34.6-95.3-52.9-153.8z" />
    </a>
    <a xlink:href="https://ru.stackoverflow.com/questions">
    <path id="h05" class="head"  d="m399.7 432.1c1.9 9.3 1 25.5 1 25.5 0 0-8.6 6-13.1 8.8-6.2 3.8-12.4 7.6-18.9 10.8-6.4 3.1-13.1 5.7-19.9 7.8-6.2 2-12.5 3.9-18.9 4.7-6 0.8-12.2 0.6-18.3 0.2-7.9-0.5-15.8-1.3-23.5-3.3-7-1.8-13.7-4.5-20.2-7.5-6.5-2.9-12.7-6.5-18.8-10.1-5.6-3.4-11.5-6.5-16.5-10.8-5.2-4.4-9.9-9.4-13.7-15-4.8-7.2-8.3-15.3-11.1-23.5-2.5-7.3-4.2-14.9-4.9-22.5-0.8-8.3-0.6-16.9 0.7-25.1 1.3-8.5 4-16.8 7.2-24.8 3.2-8 6.7-16 11.8-22.9 5.2-7.1 11.6-13.7 18.9-18.6 8.1-5.5 17.5-8.7 26.8-11.8 7.1-2.3 15.2-4.8 21.9-4.9 11.9-0.2 16.4 3.3 24.2 6.2 7 2.6 13.8 5.8 19.9 10.1 5.3 3.7 10 8.3 14 13.4 4.6 5.8 8.6 12.1 11.4 18.9 2.9 7 3.8 14.7 5.2 22.2 1.2 6.3 2.3 12.6 2.9 18.9 0.9 7.9 0 16.2 1.5 23.7 8.3 10.6 23.8 19.1 30.5 29.6z" />
</a>    
<a xlink:href="https://ru.stackoverflow.com/users/28748/alexandr-tt?tab=profile">
<path id="h06" class="head"  stroke="black" stroke-width="2" d="m610.4 197.9c1.3 7.8 2 14 3.3 20.9 1.4 7.7 3.8 15.1 4.6 22.9 1 9.6 2.4 19.6 0.3 29.1-0.8 3.8-3.5 6.9-4.9 10.5-1.2 3.1-2.4 6.2-2.9 9.5-0.9 5.4-1.1 10.9-0.7 16.3 0.4 5 2.4 10.5 2.9 14.7-3.1 3.5-8.3 6.8-12.4 10.1-4.6 3.7-9 7.6-13.7 11.1-4.7 3.5-9.4 7.3-14.7 9.8-5.1 2.4-10.8 3.5-16.3 4.9-6.9 1.7-16 4-20.9 4.2-3.2 0.2-8.7-2.1-12.7-3.9-16.7-7.5-31.3-17.6-46.7-28.7-2-9 0.2-17.7 1.3-26.5 0.9-6.8 2.3-13.6 4.2-20.2 2.2-7.4 4.7-14.8 8.5-21.6 4.2-7.5 9.3-14.5 15.3-20.6 6-6 13.1-10.8 20.2-15.3 6.3-4.1 13.1-7.6 19.9-10.8 5.7-2.7 11.6-5.3 17.6-7.2 5.9-1.9 11.9-3 18-4.2 9.8-2 22.3-7.1 29.7-4.9z"/>     
</a>
<a xlink:href="https://ru.stackoverflow.com/questions">
  <path  id="h07" class="head"  d="M382.4 343.6 463.3 335.3c0 0 39.6 26.9 61.9 39.3 4.4 1.3 9.3 0.5 13.9 0 7.4-0.9 14.5-3.2 21.7-5.1 5.9-1.5 11.9-2.9 17.6-5.1 5.5-2.1 10.7-4.8 15.7-7.9 5-3 9.7-6.6 14.3-10.2 4.1-3.2 8-7.8 12-10.2 8.7 11.7 15.3 21 22.2 30.9 3.4 4.9 4.5 11.1 6.9 16.6 1.3 3 2.7 5.9 4.2 8.8 1.4 2.8 2.5 5.7 4.2 8.3 1.5 2.4 3.4 4.6 5.1 6.9 1.4 2 2.9 3.9 4.2 6 1.3 2.1 3 4.1 3.7 6.5 0.8 2.7 1 5.6 0.5 8.3-0.7 3.5-2.2 7-4.6 9.7-2.9 3.3-7.3 4.8-11.1 6.9-4.8 2.6-10.4 3.7-14.8 6.9-2.6 2-5 4.5-6.5 7.4-1.2 2.4-1.2 5.2-1.8 7.9-0.6 2.8-1.8 5.5-1.8 8.3 0 3 0.2 5.7 1.8 8.8-5.6 0.4-13.5-1.8-20.3-2.8-8.9-1.2-17.9-2.2-26.8-3.7-8.7-1.4-17.3-3-25.9-5.1-7.2-1.8-14.1-4.4-21.2-6.5-6.5-1.9-13-3.6-19.4-5.5-5.4-1.6-10.6-5-16.2-5.1-14.3 20.7-29 48.2-41.6 67.4 1.4 6.3 10.5 7.6 16.2 10.6 5.6 3 11.7 4.9 17.6 7.4 5.5 2.4 10.8 5.3 16.4 7.4 7.1 2.6 14.6 4.5 21.9 6.5 7.3 2 14.7 4 22.2 5.5 9.3 1.9 18.6 3.3 28 4.3 10 1 24.2 0.5 30.2 1.7-0.6 3.6-1 5.2-0.9 7.9 0.1 3 0.5 6 1.4 8.8 1.4 4.1 4.2 7.6 6 11.5 1.9 3.9 3.9 7.8 5.1 12 1.1 4 2.3 8.3 1.8 12.5-0.7 6.5-3.2 13.1-6.9 18.5-3.4 4.8-13.4 11.5-13.4 11.5-9.3-0.3-14.9-0.5-22.3-0.7-6.3-0.2-12.5-0.3-18.8-0.7-8.8-0.5-17.6-1.2-26.3-2.3-7.7-1-15.3-2.4-22.9-3.8-10.2-1.8-20.5-3.7-30.7-5.9-7.4-1.6-14.8-2.9-22-5.2-5-1.6-9.6-4.1-14.5-5.9-5.8-2.2-11.7-4-17.6-6-8.2-2.9-16.6-5.2-24.5-8.8-6.1-2.8-11.8-6.3-17.6-9.7-3.6-2.2-7.7-3.9-10.6-6.9-3.3-3.5-5.7-8-7.4-12.5-2.9-7.6-3.2-16-4.6-24-1.8-10.3-3.4-20.6-4.6-30.9-1.1-9.7-1.3-17.7-2.3-29.1 6.9-2.2 12.4-5.7 18.5-8.8 5-2.5 10.1-4.7 14.8-7.9 4.8-3.2 9-7.3 13.4-11.1 4.3-3.7 9.7-7.4 12.5-11.5-0.8-13.6-2.6-25.4-2.8-40.6-6.2-12.4-21.6-15.7-31.4-27.2-1.2-14.8-2.3-46.2-2.3-46.2z"/>  
  </a>
  <a xlink:href="https://ru.stackoverflow.com/questions">
  <path id="h08" class="head"  d="m507.1 473.9c5.3 0.9 9.3 3.9 14.1 5.5 6.5 2.2 13 4.2 19.6 5.8 7.2 1.7 14.6 2.9 21.9 4.2 8 1.4 16 2.7 24 3.9 8.2 1.3 16.4 3 24.7 3.7 4.6 0.4 9.2 0 13.9 0.2 3.2 0.1 7.5-0.1 9.5 0.7 1.5 0.6 0.5 3.8 0.5 5.7 0 1.7 0.3 3.5-0.5 5-0.6 1.3-2.1 2.1-3.2 3-1 0.8-2 1.5-3 2.3-1.8 1.4-3.2 2.6-5.3 4.3-1.4 1.1-3.4-0.1-5.1-0.2-2.5-0.2-4.9-0.8-7.4-0.8-2.5 0-4.9 0.5-7.4 0.9-2.4 0.4-4.8 1-7.2 1.4-2.6 0.4-5.2 0.7-7.9 0.9-1.8 0.2-3.7 0.1-5.5 0.5-1.7 0.3-5.2-0.4-5.1 1.4 0.1 1.9 3.8 0.7 5.8 0.8 1.9 0.2 3.9 0.2 5.8 0.1 3.3-0.2 6.6-0.6 9.9-1.2 2.7-0.5 5.2-1.6 7.9-2 2.8-0.3 5.7-0.3 8.5 0 2.4 0.3 5 0.4 7.2 1.6 1.6 0.9 2.7 2.6 3.9 4 1 1.2 2.4 2.1 2.9 3.6 1.2 3.3 0.9 7.1 0 10.5-0.6 2.3-2 4.4-3.6 6.2-1.5 1.7-3 4.1-5.2 4.2-8.4 0.4-16.6-1-24.8-2-9-1-17.9-2.4-26.8-3.9-9.5-1.6-19-3.1-28.4-5.2-9.1-2-18-4.9-27.1-7.2-5.3-1.4-12.1-2.1-16-3.9-6.1-2.8-12.5-4.9-18.3-9.1 9.3-14.8 19.6-31.4 27.7-44.8z" /> 
  </a>
  <a xlink:href="https://ru.stackoverflow.com/questions">
  <path id="h09" class="head"  d="m88.2 473.6c11.9-1.8 30.4 5.9 45.7 7.8 10.8 1.4 21.8 1.5 32.7 2.6 10 1.1 20 3.4 30 3.9 8 0.4 16.1-0.3 24.2-0.7 4.1-0.2 8.4-1.6 12.4-0.7 5.4 1.3 9.4 6 14.4 8.5 7.4 3.7 22.9 9.5 22.9 9.5l-5.9 244.6c0 0-2 74-2 106.5 0 0-24.4-3.2-36.6-5.2-10.9-1.9-21.7-4.2-32.6-6.4-12.2-2.5-24.6-4.7-36.7-8-11.5-3.1-22.9-6.8-34-11.1-9.4-3.6-18.6-7.7-27.4-12.4-7-3.7-13-6-20.2-12.4 10.8-13.7 14.3-14.4 18.9-22.2 5.6-9.3 11.4-18.5 15-28.7 4.1-11.5 5.5-23.8 7.2-35.9 1.8-12.8 2.6-25.7 3.3-38.5 0.7-14.4 0.9-28.7 0.7-43.1-0.2-12-1.2-24-2-35.9-0.8-12-1-24-2.6-35.9-1.5-11.4-3.8-22.8-6.5-34-2.3-9.5-4.8-19-8.5-28.1-3.4-8.4-8.5-15.9-12.4-24.2z"/>
 </a>
 <a xlink:href="https://ru.stackoverflow.com/questions">
 <path id="h10" class="head"  d="m290 497.1c0 0 20.4 3.8 30.7 3.9 7.9 0.1 17.7-4 23.5-2.6 3.8 11.3 2 21.4 3.3 32 1.2 9.8 2.3 19.6 3.9 29.4 1.3 7.5 1.6 15.2 4.6 22.2 3.6 8.6 8.8 16.9 15.7 23.2 9.4 8.5 21.9 12.7 33.3 18 14.3 6.6 29.2 12.2 44.1 17.3 13.4 4.6 27 9 40.8 12.1 15.7 3.5 31.7 5.5 47.7 7.2 14.5 1.5 35.2-0.7 43.8 2.6-13.4 5.6-13.8 4.9-20.9 6.8-8.3 2.3-16.8 3.8-25.2 5.5-7.9 1.6-16.1 2-23.8 4.5-6.4 2.1-13 4.5-18.3 8.6-5.7 4.5-9.9 10.8-13.7 17-4.1 6.6-7.8 13.7-9.8 21.2 0 0-5.2 17.2-7.8 25.8-3.7 12-8 23.8-11.1 35.9-3.3 12.9-6.3 26-7.8 39.2-0.7 6.3 0 13.1-0.7 18.9-0.7 6.4 0.2 13.4 3.3 16.3 2.6 2.4 3.9 6 5.4 9.3-42.4-2.8-112.8-7.9-170-13.9-1.2-96.1 9.1-360.6 9.1-360.6z" /> 
 </a>
 
</svg>

Answered by Alexandr_TT on August 30, 2021

Вам достаточно подготовить исходное SVG изображение в редакторе, заранее разделив его на требуемые сектора и добавив на страницу в качестве кода (а не как изображение).

Имейте ввиду что в случае SVG области действия hover (и других эвентов) затрагиваемая область может отличаться, так как некоторые браузеры отталкиваются от "правильной" геометрии формы.

Другой вариант - это реализовать тоже самое но с помощью HTML5 Canvas и Canvas API.

Answered by Vasily on August 30, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP