Верстка: круг с пустотой внутри и элементами по кругу

Question

Нужна верстка круга с пустотой внутри и элементами вокруг данного круга. С ними в будущем нужно будет взаимодействовать. Ломаю голову уже около 40 минут, clip-path не помогает. При наведении каждый элемент должен подсвечиваться красным. Каким образом я могу это выполнить, может предложите какое-нибудь руководство по данному поводу? Или приведете свои примеры?

Очень сильно выручите, прикрепляю скриншот.

https://stackoverflow.com/questions/10790341/creating-a-circular-menu-with-css — InDevX, Jun 22 '21 at 09:29
Самый простой способ - SVG, самый интересный - canvas по ссылке от InDevX выше в коменте, есть интересный вариан со skew в той же цепочке прямая ссылка — Greg--, Jun 22 '21 at 09:51
Заменил метку jQuery на SVG потому как по моему убеждению без SVG здесь будет много сложнее. Так как на Canvas отлавливать события мыши намного сложнее. Или каждый элемент отрисовывать на отдельном слое с прозрачным фоном. Но проще все таки с помощью одного SVG-элемента. Тем более если это меню, то рендериться должно быстрее. — Leonid, Jun 22 '21 at 10:45
Вот хороший пример. Возможно, будет чем-то полезен https://codepen.io/Thijs/pen/yyRBxV — Макс к, Jun 22 '21 at 10:47
@Макск, поддерживаю!!! С помощью редактора вектора CorelDraw, например, можно создать любую конфигурацию этого меню, объединить каждую "кнопку" с пиктограммой внутри. В SVG файле назначить каждому элементу свой id и отлавливать события мыши как на обычном элементе HTML. По первой ссылке там весь Canvas отрисовывается сотни раз по событию mousemove, а click даже не прописан - еще одну портянку писать для этого. — Leonid, Jun 22 '21 at 10:55

Leonid · Answer 1 · 2021-06-22T21:55:28.347

Оказалось, что нет никакой возможности для canvas не считывать события мыши на прозрачной области (вроде pointer-events: fill; для SVG), иначе можно было разместить несколько canvas послойно с разными закрашенными областями и отлавливать события только на них.

По этому в коде я создаю константы путей, взятых из SVG отдельного элемента. Прописываю цвета для событий mousedown и mousemove.

Дополнительно к получению доступа к canvas#menu создаю другой элемент canvas без добавления его в DOM (element_detector). На этом "теневом" холсте вырисовываем фигуры по нашим путям, где фигуры заливаем разным цветом без указания правила evenodd. Размеры полотен и координаты фигур совпадают и по координатам canvas#menu можно будет получать данные о цвете в пикселе - точке срабатывания события. Что и производится в функции detectElement().

Главная цель проекта - отловить событие mouseover на конкретном элементе меню (фигуре). Но так как это событие будет зарегистрировано на самом элементе canvas единожды, при "входе" на весь вмещающий прямоугольник, то приходится отлавливать каждое событие mousemove на элементе и передавать для обработки в функцию detectElement, которая вызывает drawMenu() с параметрами, зависящими от полученного цвета условной подложки и события мыши. Одним словом: реализация mouseover на отдельных фигурах canvas - крайне неэффективнa.

Отсюда основной вывод. Для подобных меню и вообще для отлавливания разных событий на сложных фигурах лучше всего подходит SVG! Их даже послойно можно разместить друг на друге и получать события мыши только на залитых фигурах.

Ремарка: событие mouseup никак не обрабатывается в drawMenu() просто ctx.fillStyle не может получить доступ к соответствующему свойству и не меняет стиль заполнения (что в итоге работает, но это неправильно во всех смыслах). Мой косяк.

const PATHS = ['M327.5 68.43c16.24,16.28 26.29,38.75 26.29,63.57l-60 0c0,-8.29 -3.36,-15.78 -8.79,-21.21l42.43 -42.43 0.07 0.07zm-28.71 43.8c0,-1.6 0.39,-3.15 1.18,-4.64 0.78,-1.5 1.9,-2.64 3.34,-3.43 1.44,-0.79 3.05,-1.19 4.83,-1.19 2.75,0 5,0.9 6.76,2.68 1.76,1.8 2.63,4.05 2.63,6.79 0,2.75 -0.89,5.03 -2.66,6.85 -1.77,1.8 -4,2.71 -6.69,2.71 -1.67,0 -3.26,-0.38 -4.77,-1.13 -1.51,-0.76 -2.66,-1.86 -3.44,-3.32 -0.79,-1.45 -1.18,-3.23 -1.18,-5.32zm4.94 0.26c0,1.8 0.42,3.19 1.28,4.14 0.85,0.97 1.91,1.45 3.16,1.45 1.25,0 2.3,-0.48 3.15,-1.45 0.85,-0.95 1.27,-2.35 1.27,-4.18 0,-1.78 -0.42,-3.15 -1.27,-4.11 -0.85,-0.96 -1.9,-1.44 -3.15,-1.44 -1.25,0 -2.31,0.48 -3.16,1.44 -0.86,0.96 -1.28,2.34 -1.28,4.15zm15.47 -9.13l2.67 0 0 -1.37c0,-1.53 0.16,-2.68 0.49,-3.43 0.32,-0.76 0.92,-1.37 1.79,-1.85 0.88,-0.47 1.98,-0.71 3.31,-0.71 1.37,0 2.71,0.21 4.02,0.61l-0.64 3.34c-0.77,-0.18 -1.5,-0.27 -2.21,-0.27 -0.7,0 -1.2,0.16 -1.5,0.49 -0.31,0.33 -0.45,0.96 -0.45,1.89l0 1.3 6 0 0 -1.37c0,-1.53 0.16,-2.68 0.49,-3.43 0.32,-0.76 0.92,-1.37 1.79,-1.85 0.87,-0.47 1.98,-0.71 3.32,-0.71 1.36,0 2.71,0.21 4.01,0.61l-0.65 3.34c-0.76,-0.18 -1.5,-0.27 -2.2,-0.27 -0.7,0 -1.19,0.16 -1.5,0.49 -0.3,0.33 -0.45,0.96 -0.45,1.89l0 1.3 3.59 0 0 3.78 -3.59 0 0 14.4 -4.81 0 0 -14.4 -6 0 0 14.4 -4.81 0 0 -14.4 -2.67 0 0 -3.78z',
'M263.88 42c23.01,0.02 46,8.81 63.55,26.36l-42.43 42.43c-5.86,-5.86 -13.54,-8.79 -21.21,-8.79l0 -60 0.09 0zm11.79 50l0 -32 21.59 0 0 3.75 -17.34 0 0 9.97 15.01 0 0 3.75 -15.01 0 0 14.53 -4.25 0z'];
const EVENTS = {'mousedown' : 'rgb(120,120,255)', 'mousemove' : 'rgb(255,60,60)'};
let menu = document.getElementById('menu');
let element_detector = document.createElement('canvas');
let w = menu.width = element_detector.width = 600;
let h = menu.height = element_detector.height = 200;
let ctx = menu.getContext('2d');
ctx.fillStyle = 'rgb(120,120,120)';
let ctx_d = element_detector.getContext('2d');
ctx_d.fillStyle = 'rgb(255,0,0)';
ctx_d.fill(new Path2D(PATHS[0]));
ctx_d.fillStyle = 'rgb(0,255,0)';
ctx_d.fill(new Path2D(PATHS[1]));
menu.addEventListener('mousedown', detectElement);
menu.addEventListener('mousemove', detectElement);
menu.addEventListener('mouseup', detectElement);
function drawMenu(menu_item=-1, event=''){
  ctx.clearRect(0,0,w,h);
  PATHS.forEach((path, index) => {
      ctx.save();
      if(index == menu_item && event){
          ctx.fillStyle = EVENTS[event];

      }
      ctx.fill(new Path2D(path), 'evenodd');
      ctx.restore();
  })
}
drawMenu();
function detectElement(event){
    let x = event.offsetX;
    let y = event.offsetY;
    let data = ctx_d.getImageData(x, y, 1, 1).data;
    if(data[0] == 0 && data[1] == 255){
        drawMenu(1, event.type);
    } else if (data[0] == 255 && data[1] == 0){
        drawMenu(0, event.type);
    } else {
        drawMenu();
    }
}

<canvas id="menu"></canvas>

Добавляю измененный код. Здесь отрисовка на "теневом холсте" производится перебором PATHS с назначением цвета в красном канале согласно индексу в массиве: (index + 1)*10. Единица добавляется чтобы оставить 0 для пустоты вокруг, а кратно десяти чтобы был разрыв между смежными фигурами. Похоже, что anti-aliasing по границам фигур создает смещение по цвету и точность обнаружения нарушается. А так достаточно точно.

    PATHS.forEach((path, index) => {
        ctx_d.fillStyle = `rgb(${(index + 1)*10},0,0)`;
        ctx_d.fill(new Path2D(path));
    })

В функцию drawMenu() добавил подсветку белым вырезанных в сегментах иконках. Так они представляют из себя отверстия, при наведении под это отверстие подкладывается белый сегмент без отверстия (благодаря fill-rull: nonzero). Для события mouseup это опция отменена так как по сути это возвращение к дефолтному отображению.

    if(event !== 'mouseup'){
        ctx.fillStyle = 'white';
        ctx.fill(new Path2D(path), 'nonzero');
    }

Функция detectElement() упростилась, мы просто получаем индекс пути в массиве PATHS обратным преобразованием. При этом 0 значение красного канала, соответствующее фону вокруг, преобразуется в -1.

    function detectElement(event){
        let x = event.offsetX;
        let y = event.offsetY;
        let index = ctx_d.getImageData(x-1, y-1, 1, 1).data[0]/10 - 1;
        drawMenu(index, event.type);
    }

PS. Какой то баг с сегментом с крестиком, никак не работает на нем правильно nonzero и белый фон под вырезом отсутствует. Это где-то на уровне формирования векторных путей, в коде все нормально, скорее всего...)

    const PATHS = [
    "M331.06 175.45l-9.55 -27.39c-3.6,1.26 -7.48,1.94 -11.51,1.94 -9.3,0 -17.75,-3.63 -24.02,-9.55l-19.9 21.09c11.46,10.82 26.91,17.46 43.92,17.46 7.38,0 14.46,-1.25 21.06,-3.55zm-35.5 -12.81c-0.4,0.6 -1.1,1.4 0.87,3.84 0.93,1.15 2.34,1.55 3.83,1.55 1.49,0 2.78,-0.52 3.84,-1.55 1.05,-1.04 1.59,-2.3 1.59,-3.77 0,-1.47 -0.54,-2.72 -1.59,-3.76 -1.06,-1.04 -2.34,-1.56 -3.84,-1.56 -0.78,0 -1.53,0.16 -2.23,0.48l-0.57 -1.29c-4.14,0.71 -7.17,2.75 -9.08,6.11 0.55,0.98 1.22,1.86 2,2.63 1.9,1.84 4.23,3 7.01,3.48 -1.2,-0.53 -2.16,-1.34 -2.89,-2.43 -0.73,-1.11 -1.1,-2.32 -1.1,-3.66 0,-0.81 0.14,-1.6 0.43,-2.37 2.39,0.75 2.05,0.93 2.43,1.3 0.9,-1.6 1.99,0.5 4.34,1.54l-1.98 -4.15c1.6,-0.71 3.3,-0.37 4.53,0.84 0.8,0.78 1.2,1.73 1.2,2.84 0,1.1 -0.4,2.05 -1.2,2.84 -0.8,0.79 -1.76,1.18 -2.89,1.18 -1.13,0 -2.1,-0.39 -2.9,-1.18 -0.79,-0.79 -0.82,-2.46 -1.8,-2.91zm16.59 0.05c-0.56,-0.98 -1.23,-1.86 -2.03,-2.63 -1.91,-1.85 -4.26,-3.01 -7.07,-3.48 1.22,0.53 2.2,1.33 2.95,2.42 0.75,1.12 1.13,2.35 1.13,3.7 0,1.34 -0.37,2.55 -1.11,3.65 -0.74,1.1 -1.7,1.91 -2.91,2.45 4.13,-0.71 7.14,-2.75 9.04,-6.11z",
    "M364.38 81.24c6.09,9.8 9.62,21.37 9.62,33.76 0,7.84 -1.41,15.36 -4,22.3l-27.19 -10.1c1.42,-3.8 2.19,-7.91 2.19,-12.2 0,-6.78 -1.93,-13.1 -5.26,-18.46l24.64 -15.3zm2.56 26.51l-1.28 0 0 -2.29c0,-0.39 -0.08,-0.67 -0.22,-0.83 -0.15,-0.16 -0.42,-0.24 -0.82,-0.24l-4.01 0 0 1.44 -1.93 -1.93 1.93 -2.2 0 1.41 4.44 0c0.54,0 0.99,0.18 1.35,0.54 0.36,0.37 0.54,0.82 0.54,1.38l0 2.72zm1.48 2.1l-1.42 0 0 3.74c0,0.55 -0.17,1.01 -0.53,1.37 -0.36,0.36 -0.82,0.54 -1.37,0.54l-5.13 0 0 -1.29 4.67 0c0.4,0 0.68,-0.07 0.84,-0.22 0.16,-0.14 0.24,-0.42 0.24,-0.83l0 -3.31 -1.45 0 1.94 -1.93 2.21 1.93zm-9.97 -5.31l-4.66 0c-0.4,0 -0.69,0.08 -0.85,0.22 -0.16,0.15 -0.24,0.42 -0.24,0.83l0 2.14 1.47 0 -2.16 1.95 -2.01 -1.95 1.41 0 0 -2.57c0,-0.55 0.18,-1 0.55,-1.36 0.36,-0.36 0.82,-0.54 1.37,-0.54l5.12 0 0 1.28zm1.2 10.37l-1.93 2 0 -1.41 -4.41 0c-0.55,0 -1,-0.19 -1.36,-0.55 -0.36,-0.36 -0.54,-0.82 -0.54,-1.36l0 -3.74 1.29 0 0 3.3c0,0.4 0.07,0.67 0.22,0.83 0.15,0.15 0.42,0.23 0.81,0.23l3.99 0 0 -1.43 1.93 2.13z",
    "M310 51c22.95,0 43.08,12.09 54.38,30.24l-24.64 15.3c-6.18,-9.93 -17.19,-16.54 -29.74,-16.54l0 -29zm37.1 20.68l-10.22 2.41 -2.56 10.31 -2.41 -10.25 -10.31 -2.53 10.25 -2.41 2.53 -10.31 2.44 10.25 10.28 2.53zm-10.88 -2.41l-1.75 -7.84 0 9.66 1.75 -1.82zm8.47 2.44l-9.66 0 1.82 1.78 7.84 -1.78zm-11.02 -0.12l-1.82 -1.78 -7.84 1.78 9.66 0zm0.59 10.29l0 -9.67 -1.78 1.82 1.78 7.85z",
    "M266.08 161.54c-12.36,-11.67 -20.08,-28.2 -20.08,-46.54l29 0c0,10.03 4.22,19.07 10.98,25.45l-19.9 21.09zm4.96 -30.32l-0.36 0.5c-1.25,-0.13 -2.59,-0.29 -4.03,-0.5 -0.02,-0.01 -0.03,-0.02 -0.04,-0.03 0,-0.04 0.18,-0.11 0.54,-0.19l3.89 0.22zm9.46 5.4c-0.66,0.64 -1.11,0.96 -1.36,0.95 -0.58,-0.04 -5.14,-0.2 -13.67,-0.5 -0.4,0.14 -0.79,0.26 -1.16,0.36 -0.89,0.24 -1.68,0.36 -2.34,0.37 -1.93,0.02 -3.35,-0.24 -4.26,-0.78 0.71,0.01 1.12,-0.13 1.21,-0.42 0.04,-0.07 0.05,-0.15 0.05,-0.23 0,-0.49 -0.34,-0.83 -1.03,-0.99 -0.66,-0.14 -1.1,0 -1.31,0.44 -0.12,0.24 -0.11,0.44 0.05,0.6 -0.14,-0.07 -0.27,-0.25 -0.42,-0.57 -0.06,-0.74 1.17,-1.54 3.7,-2.39 0.95,-1.28 1.95,-1.9 3.01,-1.84 1.12,0.06 2.52,0.22 4.19,0.46 1.35,0.21 2.39,0.3 3.12,0.28 0.31,-0.01 1.27,-1.56 2.9,-4.65 0.29,-0.01 0.51,0 0.67,0.04 0.11,0.03 0.27,0.07 0.47,0.12l-0.76 3.51 4.96 0.51c-0.05,0.08 -0.16,0.17 -0.34,0.27 -0.44,0.01 -2.06,-0.04 -4.87,-0.15l-0.38 1.41c-0.28,0.27 -0.83,0.76 -1.67,1.46 -0.35,0.27 -0.87,0.57 -1.56,0.9l10.8 0.84zm-21.69 -2.92c-0.29,0.1 -0.74,0.29 -1.35,0.57 -0.23,0.14 -0.55,0.37 -0.93,0.7 -1.22,-0.7 -2.8,-1.59 -4.73,-2.65 -0.07,-0.04 -0.1,-0.07 -0.1,-0.1 0,-0.15 0.71,-0.26 2.12,-0.34l4.99 1.82zm-0.33 2.8c0,0.29 -0.43,0.44 -1.27,0.44 -0.37,0 -0.55,-0.12 -0.55,-0.34 0,-0.58 0.35,-0.85 1.05,-0.82 0.51,0.03 0.77,0.27 0.77,0.72zm8.13 -2.31l-0.34 -1.44 -1.24 -0.16 0.58 1.74 1 -0.14zm-1.44 0.22l-0.5 -1.82 -0.19 1.93 0.69 -0.11zm-0.8 -1.9c-0.82,-0.27 -1.52,-0.4 -2.11,-0.4 -0.24,0 -0.44,0.02 -0.6,0.07 -0.34,0.09 -0.81,0.52 -1.4,1.29 0.31,0.01 0.85,0.07 1.62,0.16 0.7,0.15 1.45,0.41 2.25,0.8l0.24 -1.92z",
    "M246 115c0,-17.74 7.22,-33.79 18.88,-45.39l20.45 20.57c-6.38,6.34 -10.33,15.12 -10.33,24.82l-29 0zm27.57 -21.81c0,2.47 -1.55,4.99 -4.64,7.56 -2.16,1.78 -4.83,3.43 -8.02,4.95 0.11,-0.61 0.17,-1.19 0.17,-1.75 0,-1.43 -0.45,-2.74 -1.36,-3.91 -0.85,-0.94 -1.7,-1.88 -2.56,-2.81 -0.91,-1.14 -1.36,-2.39 -1.36,-3.75 0,-1.33 0.45,-2.43 1.35,-3.29 0.9,-0.86 2.02,-1.29 3.36,-1.29 0.92,0 1.77,0.24 2.56,0.72 0.86,0.52 1.4,1.21 1.63,2.05 0.95,-1.85 2.34,-2.77 4.17,-2.77 1.24,0 2.32,0.4 3.24,1.2 0.98,0.85 1.46,1.87 1.46,3.09z",
    "M310 84c17.12,0 31,13.88 31,31 0,17.12 -13.88,31 -31,31 -17.12,0 -31,-13.88 -31,-31 0,-17.12 13.88,-31 31,-31zm17.95 46.01l-3.52 0c0,-1.75 -1.77,-3.05 -5.31,-3.88 -1.72,-0.41 -5.01,-0.83 -9.84,-1.26 -3.54,-0.31 -5.31,-0.71 -5.31,-1.23 0,-1.01 2.46,-1.73 7.39,-2.18l-3.89 0c-5.49,0.44 -8.24,1.22 -8.24,2.36 0,0.99 1.18,1.72 3.53,2.19 2.18,0.38 4.36,0.77 6.55,1.16 2.35,0.61 3.53,1.55 3.53,2.84l-20.79 0 0 -16.7 2.51 0 0 -2.5 -0.64 0.53 -1.3 -1.87 4.28 -3.26 0 -0.82 -0.58 0.46 -1.15 -1.67 8.08 -6.23 2.41 1.87 0 -1.87 2.19 0 0 3.58 2.13 1.66 2.43 -1.87 1.02 0.81 5.11 -3.89 2.7 2.1 0 -2.1 2.44 0 0 3.99 3.73 2.9 -1.3 1.87 -0.64 -0.51 0 6.82 2.48 0 0 16.7zm-1.22 -24.84l-3.45 -2.71 0 -3.86 -1.68 0 0 2.53 -3.06 -2.39 -4.78 3.64 2.02 1.52 0 -2.58 3.02 0 0 4.92 2.28 1.76 2.45 0 0 3.81 -1.49 0 -0.22 0.32 -0.77 -0.63 0 2.86 3.96 0 0 -8.94 0.98 0.82 0.74 -1.07zm-4.13 4.71l-4.31 -3.34 0 -4.79 -2.08 0 0 3.16 -3.8 -2.94 -10.2 7.88 0.91 1.31 1.24 -1.01 0 11.1 3.09 0 0 -7.86 3.84 0 0 7.86 9.16 0 0 -11.07 1.24 1.02 0.91 -1.32zm-12.93 -6.46l-2.18 -1.67 0 -3.48 -1.51 0 0 2.32 -2.73 -2.16 -7.47 5.77 0.65 0.97 0.9 -0.76 0 1.46 4.23 -3.25 2.7 2.08 0 -2.08 2.44 0 0 3.1 2.97 -2.3zm-3.37 2.6l0 -3.04 -1.69 0 0 2.55 -3.05 -2.41 -8.25 6.39 0.71 1.08 1.01 -0.83 0 8.98 2.51 0 0 -6.39 3.13 0 0 6.39 3.08 0 0 -2.59 -1.29 0 0 -3.8 1.29 0 0 -0.88 -0.75 0.62 -1.62 -2.29 4.92 -3.78zm12.35 12.07l-5.06 0 0 -4.7 5.06 0 0 4.7z",
    "M243.03 47.63c17.17,-17.08 40.84,-27.63 66.97,-27.63l0 27c-18.71,0 -35.65,7.55 -47.94,19.78l-19.03 -19.15zm42.28 -1.35l-0.73 0 0 2.42 -2.79 0 0 -2.42 -8.1 0 0 2.42 -2.76 0 0 -2.42 -0.73 0 0 -11.52c0,-1.06 0.62,-1.83 1.86,-2.31 1.2,-0.48 3.1,-0.71 5.69,-0.71 2.6,0 4.49,0.23 5.7,0.71 1.24,0.48 1.86,1.25 1.86,2.31l0 11.52zm-0.78 -6.93l0 -4.6 -6.35 0 0 4.6 6.35 0zm0.02 5.27c0,-0.27 -0.09,-0.5 -0.28,-0.69 -0.19,-0.19 -0.41,-0.28 -0.68,-0.28 -0.26,0 -0.49,0.09 -0.68,0.28 -0.2,0.19 -0.29,0.42 -0.29,0.69 0,0.26 0.09,0.49 0.29,0.68 0.19,0.19 0.42,0.28 0.68,0.28 0.27,0 0.49,-0.09 0.68,-0.28 0.19,-0.19 0.28,-0.42 0.28,-0.68zm-7.23 -5.27l0 -4.6 -6.34 0 0 4.6 6.34 0zm4.47 5l0 -0.57 -8.1 0 0 0.57 8.1 0zm0 1.15l0 -0.56 -8.1 0 0 0.56 8.1 0zm-8.9 -0.88c0,-0.27 -0.1,-0.5 -0.28,-0.69 -0.19,-0.19 -0.42,-0.28 -0.69,-0.28 -0.27,0 -0.5,0.09 -0.69,0.28 -0.18,0.19 -0.28,0.42 -0.28,0.69 0,0.26 0.1,0.49 0.28,0.68 0.19,0.19 0.42,0.28 0.69,0.28 0.27,0 0.5,-0.09 0.69,-0.28 0.18,-0.19 0.28,-0.42 0.28,-0.68z",
    "M215 115c0,-26.33 10.72,-50.16 28.03,-67.37l19.03 19.15c-12.39,12.31 -20.06,29.37 -20.06,48.22l-27 0zm29.14 -36.6l-3.04 1.48 2.79 -1.92 0.25 0.44zm-1.83 -1.73l-1.92 2.29 1.48 -2.55 0.44 0.26zm2.06 4.36l-3.38 -0.25 3.38 -0.27 0 0.52zm-4.93 -4.82l-0.23 2.73 -0.29 -2.73 0.52 0zm1 4.87l-1.43 0 0.2 -1.46 0.95 0 0.28 1.46zm2.84 5.51l-1.63 1.44 0 -0.44 1.18 -1 -0.67 0 0 -3.98 -0.51 0 0 -0.21 1.63 0 0 4.19zm-4.99 -5.88l-1.2 0.37 0 -0.37 1.2 0zm0 -0.2l-1.2 0 0 -0.69 -5.5 0 0 0.69 -1.2 0 0 -2.03 1.2 0 0 0.63 5.5 0 0 -0.63 1.2 0 0 2.03zm-1.43 0l-5.04 0 0 -0.49 5.04 0 0 0.49zm0 0.57l-5.04 0 0 -0.37 5.04 0 0 0.37zm-7.07 -4.87l-0.29 2.73 -0.23 -2.73 0.52 0zm1.96 4.87l-1.36 -0.37 1.2 0 0.16 0.37zm-3.45 -2.12l-1.89 -2.29 0.43 -0.26 1.46 2.55zm1.37 2.12l-1.43 0 0.29 -1.46 0.94 0 0.2 1.46zm-2.06 -1.2l-3.04 -1.48 0.25 -0.44 2.79 1.92zm0.08 0.9l-3.35 0.25 0 -0.52 3.35 0.27zm14.19 13.54l-0.41 0 0 0.6 -0.65 0 0 2.21 -2.53 0 0 -1.46c-0.49,-0.01 -0.78,-0.26 -0.85,-0.75l-6.19 0c-0.07,0.49 -0.34,0.74 -0.83,0.75l0 1.46 -2.52 0 0 -2.21 -0.66 0 0 -0.6 -0.41 0 0 -0.86 0.41 0 -0.02 -11.23c0,-0.23 0.12,-0.44 0.34,-0.65 0.19,-0.19 0.38,-0.3 0.56,-0.3l12.46 0c0.18,0 0.38,0.11 0.59,0.31 0.2,0.2 0.3,0.41 0.3,0.64l0 11.23 0.41 0 0 0.86zm-14.83 -6.29l-1.62 -1.44 0 -4.19 1.62 0 0 0.21 -0.5 0 0 3.98 -0.66 0 1.16 1 0 0.44zm13.94 -1.44l0 -4.19 -6.19 0 0 4.19 6.19 0zm0.08 6.58l0 -1.6 -2.23 0 0 1.6 2.23 0zm-7.19 -6.58l0 -4.19 -6.19 0 0 4.19 6.19 0zm5.13 8.24c0,-0.48 -0.23,-0.71 -0.69,-0.71 -0.47,0 -0.71,0.23 -0.71,0.71 0,0.46 0.24,0.69 0.71,0.69 0.46,0 0.69,-0.23 0.69,-0.69zm-0.72 -2.74l0 -0.55 -7.87 0 0 0.55 7.87 0zm0 1.08l0 -0.54 -7.87 0 0 0.54 7.87 0zm3.44 1.04l0 -0.58 -14.75 0 0 0.58 2.76 0c0.17,-0.2 0.39,-0.29 0.64,-0.29 0.25,0 0.46,0.09 0.64,0.29l6.64 0c0.17,-0.2 0.39,-0.29 0.65,-0.29 0.25,0 0.46,0.09 0.64,0.29l2.78 0zm-11.86 -1.04l0 -1.6 -2.23 0 0 1.6 2.23 0zm1.23 1.66c0,-0.48 -0.23,-0.71 -0.7,-0.71 -0.47,0 -0.7,0.23 -0.7,0.71 0,0.46 0.23,0.69 0.7,0.69 0.47,0 0.7,-0.23 0.7,-0.69z",
    "M215 115l27 0c0,19.49 8.2,37.05 21.33,49.45l-18.53 19.64c-18.35,-17.32 -29.8,-41.87 -29.8,-69.09zm19.42 23.29l-1.54 0 0.3 -1.43 1 0 0.24 1.43zm9.68 12.76l-0.54 0 0 -0.98c0,-0.75 -0.25,-1.39 -0.76,-1.93 -0.51,-0.53 -1.12,-0.8 -1.84,-0.8 -0.71,0 -1.32,0.27 -1.83,0.8 -0.51,0.54 -0.76,1.18 -0.76,1.93l-0.01 0.98 -7.05 0 0 -12.51 12.79 0 0 12.51zm-0.96 -0.85c0,0.62 -0.21,1.15 -0.63,1.59 -0.42,0.44 -0.93,0.66 -1.51,0.66 -0.6,0 -1.1,-0.22 -1.52,-0.66 -0.42,-0.44 -0.63,-0.97 -0.63,-1.59 0,-0.62 0.21,-1.15 0.63,-1.59 0.42,-0.44 0.92,-0.66 1.52,-0.66 0.58,0 1.09,0.22 1.51,0.66 0.42,0.44 0.63,0.97 0.63,1.59zm-12.22 -1.49c-0.49,-0.91 -1.2,-1.37 -2.15,-1.37 -0.71,0 -1.32,0.27 -1.83,0.8 -0.51,0.54 -0.76,1.18 -0.76,1.93l0 0.98 -1.14 0 0 -6.02c0,-0.62 0.4,-0.93 1.21,-0.93l0.44 0 1.16 -2.8c0.15,-0.37 0.44,-0.56 0.85,-0.56l2.22 0 0 7.97zm0 1.49c0,0.62 -0.21,1.15 -0.63,1.59 -0.42,0.44 -0.92,0.66 -1.52,0.66 -0.59,0 -1.1,-0.22 -1.52,-0.66 -0.42,-0.44 -0.63,-0.97 -0.63,-1.59 0,-0.62 0.21,-1.15 0.63,-1.59 0.42,-0.44 0.93,-0.66 1.52,-0.66 0.6,0 1.1,0.22 1.52,0.66 0.42,0.44 0.63,0.97 0.63,1.59zm10.85 -5.19l0 -3.27 -2.31 0 0 -2.31 -3.27 0 0 2.31 -2.31 0 0 3.27 2.31 0 0 2.31 3.27 0 0 -2.31 2.31 0zm-11.23 -0.91l0 -2.76 -2.33 0 -1.05 2.76 3.38 0z",
    "M264.88 69.61c6.82,6.86 13.63,13.71 20.45,20.57 10.05,-9.5 19.75,-10 24.67,-10.18 0,-9.67 0,-19.33 0,-29 -15.52,-0.02 -32.42,5.78 -45.12,18.61zm33.81 6.76l-1.9 0 -4.73 -4.7 -4.7 4.7 -1.97 0 0 -1.91 4.73 -4.73 -4.73 -4.7 0 -1.96 1.97 0 4.72 4.71 4.71 -4.71 1.9 0 0 1.96 -4.68 4.68 4.68 4.69 0 1.97z",
    "M331.06 175.45l-9.55 -27.39c9.84,-3.43 17.68,-11.12 21.3,-20.86l27.19 10.1c-6.62,17.82 -20.95,31.89 -38.94,38.15zm25.94 -31.9c-0.03,0.58 -0.38,0.93 -1.04,1.08 -0.09,-0.59 -0.41,-0.88 -0.98,-0.88 -0.38,0 -0.99,0.22 -1.85,0.65 -0.93,0.45 -1.39,0.84 -1.39,1.16 0,0.15 0.02,0.37 0.08,0.67 0.05,0.29 0.07,0.51 0.07,0.66 0,0.55 -0.2,0.97 -0.61,1.25 -0.12,-0.2 -0.56,-1.08 -1.32,-2.62 -0.53,-1.07 -1.07,-1.88 -1.6,-2.42 0.16,-0.07 0.32,-0.1 0.48,-0.1 0.26,0 0.6,0.12 1.01,0.36 0.41,0.24 0.71,0.36 0.9,0.36 0.52,0 1.24,-0.2 2.17,-0.59 0.93,-0.4 1.6,-0.6 2.02,-0.6 1.01,0 1.69,0.34 2.06,1.02zm-5.54 6.06c0,0.82 -0.45,1.49 -1.35,1.99 -0.79,0.44 -1.82,0.84 -3.11,1.19 -1.07,0.31 -2.15,0.6 -3.22,0.89 -1.63,0.53 -3.25,1.06 -4.88,1.59 -2.28,0.69 -3.88,1.03 -4.78,1.03 -0.43,0 -0.73,-0.09 -0.89,-0.26 -0.15,-0.17 -0.23,-0.47 -0.23,-0.91 0,-0.08 0.22,-0.26 0.67,-0.54 0.59,-0.38 1.28,-0.93 2.06,-1.67 1.22,-1.15 1.87,-1.76 1.96,-1.84 1.06,-0.91 1.99,-1.86 2.79,-2.85 0.88,-1.2 1.78,-2.4 2.67,-3.6 1.28,-1.51 2.45,-2.27 3.49,-2.27 0.64,0 1.32,0.48 2.04,1.44 0.5,0.68 0.94,1.46 1.31,2.33 0.3,0.57 0.6,1.14 0.91,1.7 0.38,0.72 0.56,1.31 0.56,1.78zm-5.24 -6.41c-0.02,0.25 -0.2,0.67 -0.54,1.24 -0.24,0.42 -1.21,1.42 -2.91,3.01 -2.06,1.87 -3.18,2.91 -3.36,3.12l0.21 0.25 3.61 -3.25c1.82,-1.56 3.11,-2.34 3.88,-2.34 0.1,0 0.2,0.01 0.3,0.04 -0.48,-0.35 -0.88,-1.04 -1.19,-2.07zm7.49 -0.05c-1.5,0.73 -2.44,1.09 -2.84,1.09 -0.18,0 -0.61,-0.13 -1.31,-0.41l0.73 1.08 3.42 -1.76zm3.09 0.5c-0.12,-0.17 -0.25,-0.25 -0.38,-0.25 -0.26,0 -0.38,0.19 -0.38,0.59 0,0.11 0.01,0.19 0.04,0.27 0.33,-0.05 0.57,-0.25 0.72,-0.61z",
]

const EVENTS = {
    'mousedown' : 'rgba(120,120,255,0.8)',
    'mousemove' : 'rgb(255,60,60,1)',
    'mouseup' : 'rgba(220,220,220,0.5)'
}

let menu = document.getElementById('menu');
let element_detector = document.createElement('canvas');
let w = menu.width = element_detector.width = 600;
let h = menu.height = element_detector.height = 200;
let ctx = menu.getContext('2d');
let ctx_d = element_detector.getContext('2d');

ctx.fillStyle = EVENTS.mouseup;

PATHS.forEach((path, index) =&gt; {
    ctx_d.fillStyle = `rgb(${(index + 1)*10},0,0)`;
    ctx_d.fill(new Path2D(path));
})

menu.addEventListener('mousedown', detectElement);
menu.addEventListener('mousemove', detectElement);
menu.addEventListener('mouseup', detectElement);

drawMenu();

function drawMenu(menu_item=-1, event=''){
    ctx.clearRect(0,0,w,h);
    PATHS.forEach((path, index) =&gt; {
        ctx.save();
        if(index == menu_item &amp;&amp; event){
            if(event !== 'mouseup'){
                ctx.fillStyle = 'white';
                ctx.fill(new Path2D(path), 'nonzero');
            }
            ctx.fillStyle = EVENTS[event];
        }
        ctx.fill(new Path2D(path), 'evenodd');
        ctx.restore();
    })
}

function detectElement(event){
    let x = event.offsetX;
    let y = event.offsetY;
    let index = ctx_d.getImageData(x-1, y-1, 1, 1).data[0]/10 - 1;
    drawMenu(index, event.type);
}</code></pre>

<img src="https://image.freepik.com/free-photo/city-tornado-doomsday-scene-illustration_456031-22.jpg" style="position: absolute; top:0; left:0">
<canvas id="menu" style="position: relative; z-index: 1;"></canvas>

Я по смыслу помню, спасибо. Надо было вроде ctx_d.getImageData(x, y, 1, 1).data - 1 прописывать для более понятного результата? — Leonid, Jun 22 '21 at 15:43

score 4 · Accepted Answer · answered Jun 22 '21 at 20:41

У меня нету информации о всех остальных пунктах - что это такое

Вам остаётся при наведении на .circles пройти по всем внутренним g методом forEach или может быть через цикл for и вставить из выборки этими методами/циклами в #info который автоматически стоит в центре так как viewBox у меня в центре композиции...

Так же вам надо вставить вместо emodji свои иконки так как я не нашёл их

Всю демонстрацию увидите ниже

А так же надо обернуть каждый g обернуть в тег ссылки a

Я максимально приблизил свой ответ к примеру из вопроса

body {
  background: url(https://a.d-cd.net/qgAAAgMWp-A-1920.jpg);
  background-size: cover;
  --opacity: 0.7;
  --stroke: 170;
  --size: 20px;
}
svg {
  max-height: 100vh;
}
circle {
  transition: 0.2s linear;
}
.circles circle {
  fill: none;
  stroke: rgba(0, 0, 0, var(--opacity));
  stroke-width: var(--stroke);
  stroke-dasharray: 268 1884;
  transform-origin: center;
  transform-box: fill-box;
}
.circles text {
  font-size: 70px;
  fill: red;
  text-anchor: middle;
  alignment-baseline: central;
  pointer-events: none;
}
.circles circle:hover,
.doc circle:hover {
  stroke: rgba(255, 0, 0, var(--opacity));
}
.circles .c1 {
  transform: rotate(51.9deg);
}
.circles .c2 {
  transform: rotate(103.3deg);
}
.circles .c3 {
  transform: rotate(154.8deg);
}
.circles .c4 {
  transform: rotate(206.3deg);
}
.circles .c5 {
  transform: rotate(257.6deg);
}
.circles .c6 {
  transform: rotate(309deg);
}
.circles .c7 {
  transform: rotate(0.5deg);
}
.doc circle {
  fill: none;
  stroke: rgba(0, 0, 0, var(--opacity));
  stroke-width: var(--stroke);
  stroke-dasharray: 298 3141;
  transform-origin: center;
  transform-box: fill-box;
}
.doc .text {
  fill: #fff;
  font-size: var(--size);
  text-anchor: middle;
  alignment-baseline: central;
}
.doc .c1 {
  transform: rotate(121deg);
}
.doc .c2 {
  transform: rotate(155.6deg);
}
.doc .c3 {
  transform: rotate(190deg);
}
#info circle {
  fill: rgba(0, 0, 0, var(--opacity));
}
#info text {
  font-size: 40px;
}

<svg viewBox="-700 -700 1400 1400" id="svg">
  <g class="circles">
    <g>
      <title>icon1</title>
      <circle r="300" class="c1" />
      <text class="icon1" x="60" y="280"></text>
    </g>
    <g>
      <title>icon2</title>
      <circle r="300" class="c2" />
      <text x="-190" y="235" class="icon2"></text>
    </g>
    <g>
      <title>icon3</title>
      <circle r="300" class="c3" />
      <text class="icon3" x="-290" y="0" ></text>
    </g>
    <g>
      <title>icon4</title>
      <circle r="300" class="c4" />
      <text class="icon4" x="-190" y="-235"></text>
    </g>
    <g>
      <title>icon5</title>
      <circle r="300" class="c5" />
      <text class="icon5" x="60" y="-280"></text>
    </g>
    <g>
      <title>icon6</title>
      <circle r="300" class="c6" />
      <text class="icon6" x="270" y="-110">‍</text>
    </g>
    <g>
      <title>icon7</title>
      <circle r="300" class="c7" />
      <text class="icon7" x="270" y="110"></text>
    </g>
  </g>

  <g class="doc">
    <g>
      <title>Лицензии</title>
      <circle r="500" class="c1" />
      <text class="text" x="-390" y="320">Лицензии</text>
    </g>
    <g>
      <title>Паспорт</title>
      <circle r="500" class="c2" />
      <text class="text" x="-500" y="50">Паспорт</text>
    </g>
    <g>
      <title>Тех паспорт</title>
      <circle r="500" class="c3" />
      <text class="text" x="-460" y="-200">Тех.паспорт</text>
    </g>
  </g>

  <g id="info">
    <circle r="200" />
    <text></text>
    <text></text>
    <text></text>
  </g>
</svg>

Спасибо. Это помогло, только как мне вместо text вставить SVG картинку? — MADARA, Jun 23 '21 at 06:49
@MADARA вместо text картинку - покажите что это должно быть ? скриншот или как мне узнать - что должно получится — Резидент Казахстана, Jun 23 '21 at 07:28
@MADARA https://codepen.io/topicstarter/pen/MWpMedO вот поглянь - у тебя будет тоже самое, в defs вставишь иконки и вызовешь их через use точно так же как я вызвал image - если не понятно - я дополню свой ответ но возможно я буду на работе и не смогу вовермя это сделать — Резидент Казахстана, Jun 23 '21 at 07:36
@MADARA я добавил иконку в svg - посмотри — Резидент Казахстана, Jun 24 '21 at 01:48

Alexandr_TT · Answer 3 · 2021-06-22T19:37:51.640

Нужна верстка круга с пустотой внутри и элементами вокруг данного круга. С ними в будущем нужно будет взаимодействовать

Другими словами это будет радиальное меню со ссылками.

Самый простой путь, - это создать сегменты на круге с помощью path SVG и привязать к каждому сегменту свои ссылки. Я добавил ещё тултипы, чтобы при наведении менялся не только цвет, но и всплывала подсказка.

<a xlink:href="https://ru.stackoverflow.com/questions"> 
    <title> Все вопросы </title>
  <path class="segment"  id="s1"  d="M 55 55 L 105 55 A 50 50 0 0 1 90.35 90.35 Z"/>
</a>

Все ссылки рабочие в пределах RuSO, пощелкайте ради интереса.

Чтобы внести немного разнообразия, я сделал двухцветное выделение разных секторов.

При необходимости можно сделать :hover одноцветным.

Прорезь вокруг центрального круга реализована с помощью маски SVG

<defs>
  <mask id="msk">  
     <rect width="100%" height="100%" fill="white" />
    <circle fill="white" stroke-width="3" stroke="red" cx='55' cy='55' r='24'  />  
  </mask>
</defs>

.back {
position:relative;
}
svg {
  width: 400px;
  height: 400px;
position:absolute;
  top:30%;
  left:30%;
--d:red;
  --r:greenYellow;
  --g:yellowgreen;
}
.segment {
fill:#2F3031;
opacity:0.8;
stroke:#fff;
stroke-opacity:0.3;
}
#center {
fill:#2F3031;
stroke-width:3;
stroke:white;
cursor: pointer; 
-webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
} 
#center:hover {
fill: var(--g);
}
#s1,#s3, #s5, #s7 {
cursor: pointer; 
 -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
#s2,#s4,#s6,#s8 {
cursor: pointer; 
-webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
#s1:hover, #s3:hover, #s5:hover, #s7:hover  {
 fill: var(--d);
}
#s2:hover, #s4:hover, #s6:hover, #s8:hover  {
 fill: var(--r);
}

<div class="back">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Foro_Romano.jpg/1200px-Foro_Romano.jpg" />
</div>
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox='0 0 110 110'> 
<defs>
  <mask id="msk">  
     <rect width="100%" height="100%" fill="white" />
    <circle fill="white" stroke-width="3" stroke="red" cx='55' cy='55' r='24'  />  
  </mask>
</defs>  

  <!-- Сегменты круга с рабочими ссылками -->
<g transform="rotate(-22.5 55 55)" mask="url(#msk)" >
<a xlink:href="https://ru.stackoverflow.com/questions"> 
    <title> Все вопросы </title>
  <path class="segment"  id="s1"  d="M 55 55 L 105 55 A 50 50 0 0 1 90.35 90.35 Z"/>
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/javascript"> 
        <title> Все вопросы [javascript]  </title>
      <path class="segment" id="s2"  d="M 55 55 L 90.35 90.35 A 50 50 0 0 1 55 105 Z"/>
     </a> 

<a xlink:href="https://ru.stackoverflow.com/questions/tagged/svg">
    <title> Все вопросы [SVG]  </title>
<path class="segment" id="s3"  d="M 55 55 L 55 105 A 50 50 0 0 1 19.6447 90.35 Z" />
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/css"> 
       <title> Все вопросы [CSS]  </title>
    <path class="segment" id="s4"  d="M 55 55 L 19.64 90.353 A 50 50 0 0 1 5 55 Z" />
    </a>
<a xlink:href="https://ru.stackoverflow.com/questions/tagged/java"> 
     <title> Все вопросы [java] </title>
<path class="segment" id="s5"  d="M 55 55 L 5 55 A 50 50 0 0 1 19.64 19.64 Z" />
</a> 
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/python">
       <title> Все вопросы python  </title>
    <path class="segment" id="s6"  d="M 55 55 L 19.64 19.64 A 50 50 0 0 1 55 5 Z" />
    </a> 
<a xlink:href="https://ru.stackoverflow.com/help"> 
     <title> Справочный центр </title> 
<path class="segment" id="s7"  d="M 55 55 L 55 5 A 50 50 0 0 1 90.35 19.64 Z" />
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/php"> 
        <title> Все вопросы [php]   </title>
    <path class="segment" id="s8"  d="M 55 55 L 90.35 19.64 A 50 50 0 0 1 105 55 Z" />

    </a>
</g>  
      <a xlink:href="https://ru.stackoverflow.com/questions/tagged/html"> 
        <title> Все вопросы [HTML]  </title> 

  <circle mask="url(#msk)" id="center" cx='55' cy='55' r='24'  />  
   </a>
 </svg>

@Leonid сегменты полупрозрачные, разверни на весь экран — Alexandr_TT, Jun 22 '21 at 16:21
Да, точно, так намного круче. И еще с задержкой анимации! Буду изучать код. — Leonid, Jun 22 '21 at 16:22
@Leonid в комментариях, что-то объяснить довольно сложно из-за краткости Вот по маскам я писал подробный ответ Это довольно сложный вопрос, но намного эффективней работает чем clip-path https://ru.stackoverflow.com/q/919186/28748 Прочтешь, станет понятно / <g> групповой тег и в него можно добавлять несколько разнородных команд. transform="rotate" Это я немного повернул сектор для центровки. Маска другая команда, которая применяется для все элементов входящих в группу. — Alexandr_TT, Jun 22 '21 at 16:52

Alexandr_TT · Answer 4 · 2021-06-23T13:58:19.833

Вариант с однотонными секторами и иконками

.back {
position:relative;
}
svg {
  width: 400px;
  height: 400px;
position:absolute;
  top:30%;
  left:10%;
}
.segment {
fill:#2F3031;
opacity:0.8;
stroke:#fff;
stroke-opacity:0.3;
-webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
.segment:hover {
fill:red;
opacity:0.8;
}
#center {
fill:#2F3031;
stroke-width:3;
stroke:white;
cursor: pointer; 
-webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
} 
#center:hover {
fill:red;
}
.icon {
fill:#75726F;
pointer-events:none;
}

<div class="back">
 <img src="https://i.stack.imgur.com/UXqwh.jpg" />
</div>
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox='0 0 110 110'> 
<defs>
   <mask id="msk">  
     <rect width="100%" height="100%" fill="white" />
    <circle fill="white" stroke-width="3" stroke="red" cx='55' cy='55' r='24'  />  
  </mask>
</defs>  

  <!-- Сегменты круга с рабочими ссылками -->
<g transform="rotate(-22.5 55 55)" mask="url(#msk)" >
<a xlink:href="https://ru.stackoverflow.com/questions"> 
    <title> Все вопросы </title>
  <path class="segment"  id="s1"  d="M 55 55 L 105 55 A 50 50 0 0 1 90.35 90.35 Z"/>
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/javascript"> 
        <title> Все вопросы [javascript]  </title>
      <path class="segment" id="s2"  d="M 55 55 L 90.35 90.35 A 50 50 0 0 1 55 105 Z"/>
     </a> 

<a xlink:href="https://ru.stackoverflow.com/questions/tagged/svg">
    <title> Все вопросы [SVG]  </title>
<path class="segment" id="s3"  d="M 55 55 L 55 105 A 50 50 0 0 1 19.6447 90.35 Z" />
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/css"> 
       <title> Все вопросы [CSS]  </title>
    <path class="segment" id="s4"  d="M 55 55 L 19.64 90.353 A 50 50 0 0 1 5 55 Z" />
    </a>
<a xlink:href="https://ru.stackoverflow.com/questions/tagged/java"> 
     <title> Все вопросы [java] </title>
<path class="segment" id="s5"  d="M 55 55 L 5 55 A 50 50 0 0 1 19.64 19.64 Z" />
</a> 
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/python">
       <title> Все вопросы python  </title>
    <path class="segment" id="s6"  d="M 55 55 L 19.64 19.64 A 50 50 0 0 1 55 5 Z" />
    </a> 
<a xlink:href="https://ru.stackoverflow.com/help"> 
     <title> Справочный центр </title> 
<path class="segment" id="s7"  d="M 55 55 L 55 5 A 50 50 0 0 1 90.35 19.64 Z" />
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/php"> 
        <title> Все вопросы [php]   </title>
    <path class="segment" id="s8"  d="M 55 55 L 90.35 19.64 A 50 50 0 0 1 105 55 Z" />

    </a>
</g>  
      <a xlink:href="https://ru.stackoverflow.com/questions/tagged/html"> 
        <title> Все вопросы [HTML]  </title> 

  <circle mask="url(#msk)"  id="center" cx='55' cy='55' r='24'  />  
  </a>  
         <!-- Иконки -->
    <g transform=" scale(1) translate(45 7)">
    <path class="icon" id="House" d="M15,8.29V5h-2v1.57L10,4l-7,6h2v6h4v-4h2v4h4v-6h2L15,8.29z M9,9c0-0.55,0.45-1,1-1c0.55,0,1,0.45,1,1H9z"/>
    </g>

    <g transform=" scale(0.6) translate(125 33)">
    <path class="icon" id="cloud"   d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
    </g>

    <g transform=" scale(0.6) translate(145 80)">
      <path class="icon" id="podcast" d="M14,12c0,0.74-0.4,1.38-1,1.72V22h-2v-8.28c-0.6-0.35-1-0.98-1-1.72c0-1.1,0.9-2,2-2S14,10.9,14,12z M12,6 c-3.31,0-6,2.69-6,6c0,1.74,0.75,3.31,1.94,4.4l1.42-1.42C8.53,14.25,8,13.19,8,12c0-2.21,1.79-4,4-4s4,1.79,4,4 c0,1.19-0.53,2.25-1.36,2.98l1.42,1.42C17.25,15.31,18,13.74,18,12C18,8.69,15.31,6,12,6z M12,2C6.48,2,2,6.48,2,12 c0,2.85,1.2,5.41,3.11,7.24l1.42-1.42C4.98,16.36,4,14.29,4,12c0-4.41,3.59-8,8-8s8,3.59,8,8c0,2.29-0.98,4.36-2.53,5.82l1.42,1.42 C20.8,17.41,22,14.85,22,12C22,6.48,17.52,2,12,2z"/>
     </g>
     <g transform=" scale(0.6) translate(125 125)">
      <path class="icon" id="task" d="M14,2H6C4.9,2,4.01,2.9,4.01,4L4,20c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M10.94,18L7.4,14.46l1.41-1.41 l2.12,2.12l4.24-4.24l1.41,1.41L10.94,18z M13,9V3.5L18.5,9H13z"/>
     </g>
       <g transform=" scale(0.6) translate(83 145)">
        <path  class="icon" id="video" d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z"/>
       </g>
<g transform=" scale(0.6) translate(33 125)">   
     <path class="icon" id="phone"  d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 12h2c0-4.97-4.03-9-9-9v2c3.87 0 7 3.13 7 7zm-4 0h2c0-2.76-2.24-5-5-5v2c1.66 0 3 1.34 3 3z"/>  
</g>  
      <g transform=" scale(0.6) translate(18 80)"> 
        <path class="icon" id="comment" d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
      </g>      
<g transform=" scale(0.6) translate(35 40)"> 
    <path class="icon" id="link" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
</g>    
 </svg>

Вариант добавления тени при наведении на сектора

Добавляется фильтр SVG:

<filter id="drop-shadow" x="-20%" y="-20%" height="130%" width="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
      <feOffset dx="3" dy="3" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
</filter>

.back {
position:relative;
}
svg {
  width: 400px;
  height: 400px;
position:absolute;
  top:30%;
  left:10%;
}
.segment {
fill:#2F3031;
opacity:0.8;
stroke:#fff;
stroke-opacity:0.3;
-webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
.segment:hover {
fill:red;
opacity:0.8;
filter:url(#drop-shadow);
}
#center {
fill:#2F3031;
stroke-width:3;
stroke:white;
cursor: pointer; 
-webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
} 
#center:hover {
fill:red;
filter:url(#drop-shadow);
}
.icon {
fill:#75726F;
pointer-events:none;
filter:url(#drop-shadow);
}

<div class="back">
 <img src="https://i.stack.imgur.com/UXqwh.jpg" />
</div>
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox='0 0 110 110'> 
<defs>
   <mask id="msk">  
     <rect width="100%" height="100%" fill="white" />
    <circle fill="white" stroke-width="3" stroke="red" cx='55' cy='55' r='24'  />  
  </mask> 

      <!-- Фильтр тени при наведении -->
<filter id="drop-shadow" x="-20%" y="-20%" height="180%" width="180%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
      <feOffset dx="1" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
</filter>
</defs>  

  <!-- Сегменты круга с рабочими ссылками -->
<g transform="rotate(-22.5 55 55)" mask="url(#msk)" >
<a xlink:href="https://ru.stackoverflow.com/questions"> 
    <title> Все вопросы </title>
  <path class="segment"  id="s1"  d="M 55 55 L 105 55 A 50 50 0 0 1 90.35 90.35 Z"/>
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/javascript"> 
        <title> Все вопросы [javascript]  </title>
      <path class="segment" id="s2"  d="M 55 55 L 90.35 90.35 A 50 50 0 0 1 55 105 Z"/>
     </a> 

<a xlink:href="https://ru.stackoverflow.com/questions/tagged/svg">
    <title> Все вопросы [SVG]  </title>
<path class="segment" id="s3"  d="M 55 55 L 55 105 A 50 50 0 0 1 19.6447 90.35 Z" />
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/css"> 
       <title> Все вопросы [CSS]  </title>
    <path class="segment" id="s4"  d="M 55 55 L 19.64 90.353 A 50 50 0 0 1 5 55 Z" />
    </a>
<a xlink:href="https://ru.stackoverflow.com/questions/tagged/java"> 
     <title> Все вопросы [java] </title>
<path class="segment" id="s5"  d="M 55 55 L 5 55 A 50 50 0 0 1 19.64 19.64 Z" />
</a> 
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/python">
       <title> Все вопросы python  </title>
    <path class="segment" id="s6"  d="M 55 55 L 19.64 19.64 A 50 50 0 0 1 55 5 Z" />
    </a> 
<a xlink:href="https://ru.stackoverflow.com/help"> 
     <title> Справочный центр </title> 
<path class="segment" id="s7"  d="M 55 55 L 55 5 A 50 50 0 0 1 90.35 19.64 Z" />
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/php"> 
        <title> Все вопросы [php]   </title>
    <path class="segment" id="s8"  d="M 55 55 L 90.35 19.64 A 50 50 0 0 1 105 55 Z" />

    </a>
</g>  
      <a xlink:href="https://ru.stackoverflow.com/questions/tagged/html"> 
        <title> Все вопросы [HTML]  </title> 

  <circle mask="url(#msk)"  id="center" cx='55' cy='55' r='24'  />  
  </a>  
         <!-- Иконки -->
    <g transform=" scale(1) translate(45 7)">
    <path class="icon" id="House" d="M15,8.29V5h-2v1.57L10,4l-7,6h2v6h4v-4h2v4h4v-6h2L15,8.29z M9,9c0-0.55,0.45-1,1-1c0.55,0,1,0.45,1,1H9z"/>
    </g>

    <g transform=" scale(0.6) translate(125 33)">
    <path class="icon" id="cloud"   d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
    </g>

    <g transform=" scale(0.6) translate(145 80)">
      <path class="icon" id="podcast" d="M14,12c0,0.74-0.4,1.38-1,1.72V22h-2v-8.28c-0.6-0.35-1-0.98-1-1.72c0-1.1,0.9-2,2-2S14,10.9,14,12z M12,6 c-3.31,0-6,2.69-6,6c0,1.74,0.75,3.31,1.94,4.4l1.42-1.42C8.53,14.25,8,13.19,8,12c0-2.21,1.79-4,4-4s4,1.79,4,4 c0,1.19-0.53,2.25-1.36,2.98l1.42,1.42C17.25,15.31,18,13.74,18,12C18,8.69,15.31,6,12,6z M12,2C6.48,2,2,6.48,2,12 c0,2.85,1.2,5.41,3.11,7.24l1.42-1.42C4.98,16.36,4,14.29,4,12c0-4.41,3.59-8,8-8s8,3.59,8,8c0,2.29-0.98,4.36-2.53,5.82l1.42,1.42 C20.8,17.41,22,14.85,22,12C22,6.48,17.52,2,12,2z"/>
     </g>
     <g transform=" scale(0.6) translate(125 125)">
      <path class="icon" id="task" d="M14,2H6C4.9,2,4.01,2.9,4.01,4L4,20c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M10.94,18L7.4,14.46l1.41-1.41 l2.12,2.12l4.24-4.24l1.41,1.41L10.94,18z M13,9V3.5L18.5,9H13z"/>
     </g>
       <g transform=" scale(0.6) translate(83 145)">
        <path  class="icon" id="video" d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z"/>
       </g>
<g transform=" scale(0.6) translate(33 125)">   
     <path class="icon" id="phone"  d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 12h2c0-4.97-4.03-9-9-9v2c3.87 0 7 3.13 7 7zm-4 0h2c0-2.76-2.24-5-5-5v2c1.66 0 3 1.34 3 3z"/>  
</g>  
      <g transform=" scale(0.6) translate(18 80)"> 
        <path class="icon" id="comment" d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
      </g>      
<g transform=" scale(0.6) translate(35 40)"> 
    <path class="icon" id="link" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
</g>

Верстка: круг с пустотой внутри и элементами по кругу

4 Answers4

Вариант с однотонными секторами и иконками

Вариант добавления тени при наведении на сектора