Почему значения подсказки не меняются?
карты меняются нормально (каждая через секунду) а текст нет
const $regions = document.querySelector('.interactiveMap').children;
let active = -1;
const showRegion = () => {
active = active == $regions.length - 1 ? 0 : active + 1;
let div = document.querySelector('.tooltip');
let topCoords, leftCoords;
for (let i = 0; i < $regions.length; i++) {
$regions[i].classList.toggle('active', i === active);
topCoords = $regions[i].getBoundingClientRect().top;
leftCoords = $regions[i].getBoundingClientRect().left;
div.innerHTML = leftCoords;
div.style.left = leftCoords+'px';
div.style.top = topCoords+'px';
}
}
setInterval(showRegion, 500);
.map {
padding-top: 30px;
}
.map__svg {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.map__svg .region {
fill: #ecedf2;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
cursor: pointer;
}
.region.active {
fill: #ff8f1c;
}
.tooltip {
position: absolute;
background-color: blue;
}
<div class="map__svg">
<svg data-name="Interactive map" class="interactiveMap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 601 401">
<path class="region" data-region-title="title 1" data-region-id="0" d="M28.66557,153.43886l2.16948,1.827-.44769.89543-1.72178.06879-.20606,1.72274,3.8217,4.99543,1.27457-1.06713,2.16924.06827,1.06726,2.72231,1.37646,2.72107h3.16913l.99856,1.82621.4476-.93049,2.54889,1.55124,2.16933.55048,1.78982-.20671,1.99684,1.82659,1.54938,2.89477,2.61693.82559.998-.99791.99947.344-.5512,2.653.99923,1.51575.17207,1.48111,2.10034-.10281.9987,1.06765-1.27523,2.27416.3798.99929,1.3418.17127.72389-1.79072,1.34332.345,1.99684.2067,1.10155-1.37873.89581.55114-.34447,1.17122.89477,1.00019-.99828,1.89362.62052.723.27439,2.72307,3.82227,2.101.621-1.27355-.3458-1.55057,2.5149.44719-.62143,1.99881,1.17158.37812.89615.06946,1.54791,1.99829.379,3.10057,1.89423,1.62017-2.82285,2.99633,4.54421,4.7548-1.44507,1.99772-.27629,2.34339c-2.27327,1.101-2.54723,1.20557-2.54723,1.20557l-2.51452-1.37792-1.825,2.447-1.54872.72293L69.78,214.11228l-1.65346-2.27459-1.61837.7243-3.16685-1.34352-1.99764-.8972-3.06415-.2077-1.82634,1.1049-3.16709-2.72207-2.82395-.17193-2.892-1.82622-2.61665-.17193-2.27327,1.89324-4.33762-2.96222-1.1712-2.34243-.72284-2.17007L34.7275,202.364l-1.3786-2.27446-1.79025.93-1.3775,2.44581-1.618,1.34453-1.99741.44743L24.67228,203.982l-.827,1.89643h-1.6177l-.827-.79305.10313-1.82483,1.9975-1.966L22.847,199.366l-.99856-.724.48221-1.06808-1.37684-.82692-1.06826.82692-1.2748-.44757-2.37492.96556-2.06663-1.24067-.72351-1.27412-.10161-3.10176-.99951-1.72293-1.44587-.44781-2.99644-.51722-1.06741-1.3775-.65314-3.72132-1.447-1.06774-1.51556-1.82569-1.72068-1.89524L.5,178.3496l1.27363-4.16874.99936-3.16965,2.44416-1.55109,1.17136-1.51589,3.96011-1.82578.10256-2.1706,1.34332-2.34338.27505-2.652,1.10183-2.23977,1.619-2.5489,1.1014-.82788,2.06568-1.51575.72284-3.27279,1.274-.10319,2.54823,2.99752,3.44447-.17259.79045,1.72231,1.92809.44748Z"/>
<path class="region" data-region-title="title 2" data-region-id="1" d="M49.292,169.84009l1.99684-6.44363,1.61813-.55071L51.66742,161.33l1.17077-2.72217-.10284-.89648,2.10063-2.20419h1.44616v-2.17088l1.72159-1.27455.1725-.79225h.99842l2.06559,1.44644,1.65251-.65419,1.44654.48225,1.54938-1.20642,1.61828,1.20642,1.34317-1.20642,1.65246-.1718.79235.72417,1.27485.44814,1.27338-.7931,1.10136.44734.8952-.44734,3.34-.10295.55125-1.06817.82644.06931.72294,1.10175,1.06807.069.54963-2.61836-1.10112-.34429-1.89361-.27655-1.17053-.82669-.17235-2.16927-1.44735-.55238,1.79115-1.6196.65514.62117.791-1.34358,1.7223-1-.89572-1.72294.99828-1.2745.2771-2.17035,1.06622-3.82431,1.72188.48211-.345,1.17117.89643.79324,1.54867-.72431,3.78747,1.99933h1.27433l.65419-3.342h1.44645l6.06045-3.17055,1.61851-3.82379.89453-.24124.9988.96484,1.54938-2.24-.72317-1.27407.37937-2.171,1.17025.44715,1.99726-1.1705.34528.79215H111.96l.89586-1.06808,1.99684-.44786,1.27376-3.82474.27562-2.17031-2.06625-1.722-1.48-1.27545-.96447-1.99838-1.99641-1.24015-.55234-1.92935s2.17109.55128,1.2738-.72307c-.92824-1.24134-.72146-1.792-.72146-1.792l-.37913-2.37707,1.72159-.62088-.0687-2.16941-3.20218.17112-1.44611-.82621.82668-1.89524-.61957-.99929h-1.2748l-1.1025-1.447-.89491-.17231-.10218,2.06717-1.44749.20714-.17235-1.82645-.89425,1.55147-2.65212.275-1.96289-.99886-.27534-2.17117-2.09992-.99886.1027-1.10243-.99828.1715-.99856-.344,1.17106-3.99628-.6209-.34482-.82526.79244-.896-3.16993-2.61684.27578-1.82458-1.51641L86.962,80.226l-1.068-.89567-1.37674.27549-.72332,1.24054-2.34107-.79244-3.09833-3.37659-1.89495.10385-.06918,2.06755-.55068,2.47959-.37818,2.24044-1.068,1.65319-1.997,1.72306-3.27083.34416h-3.1678l-2.61664.37921-.89681,2.68777L60.17311,92.2851l-5.269,4.0656L52.115,98.5213l-3.33973,1.82525-1.65208,2.343L23.94839,127.53075l2.445,2.17046.27572,5.89124-.44717,5.2372L25.01666,142.759l-.96457.896-.37847,2.89419,2.27327-1.10171,3.71738,4.099L28.563,153.33615v.06893l.10241.03416,2.16948,1.827-.44769.89543-1.72178.06884-.20606,1.72274,3.8217,4.99543,1.27457-1.06713,2.16924.06827,1.06726,2.72231,1.37646,2.72107h3.16913l.99856,1.82621.4476-.93049,2.54889,1.55124,2.16933.55048,1.78982-.17169v-.37878Z"/>
<path class="region" data-region-title="title 3" data-region-id="2" d="M118.67575,179.62391l.34381-.89572-1.06732-1.37873.61971-.79186-.069-1.1031-4.88925-3.89271-.48264-1.8951-.72251-.10347-.79183,1.17146-2.16976-.44852-1.27361-.82678-1.27442-.34348-1.55019.34348-.17117-1.1716.99785-1.44662-.82668-1.0687-1.27338,1.24067-.27591,1.72369-.72294-1.1715-.34447-1.172.34447-1.2745-.06818-.79253-.10322-2.205h-1.72136l-2.06682-.24087-.654-.93035-.17169-1.27479-.55125-.44785-2.169-.0688.10256-1.20656h1.89318l1.27485.82692.55177-.44838-.8274-1.27421v-1.44753l-2.27256-.6197-.551-1.44672-.89491-1.65371,2.99621-2.51622-2.89284-.92916-.82659-3.51484.72322-.72336-.89586-1.37726-.4476-.725h-.65352l-.44812-2.17036.551-.44743-.6538-1.99786-.0697-1.27464H91.12808l-3.78746-1.99938-1.54872.72431-.89638-.7932.345-1.17121-1.72188-.48211-1.06622,3.82436-.2771,2.17031-.99832,1.2745.89572,1.72288-1.72226,1.0001-.791,1.34358-.65514-.62117-1.79115,1.61965,1.44735.55233.17236,2.16926,1.17053.82669L81.797,148.65l1.10112.3443-.54963,2.61831-1.06807-.06893-.72294-1.10176-.82644-.06931-.55125,1.06817-3.34.10295-.8952.44729-1.10135-.44729-1.27338.79305-1.27485-.4481-.79235-.72417-1.65246.17179L67.507,152.54276l-1.61828-1.20642-1.54938,1.20642-1.44654-.48225-1.65251.65419-2.06559-1.44648h-.99842l-.1725.79229-1.72164,1.2745v2.17088H54.83608l-2.10063,2.20419.10284.89653-1.17077,2.72217,1.23952,1.51575-1.61813.55071-1.99684,6.44362v.34372l1.99684,1.82659,1.54938,2.89481,2.61693.82555.998-.99791.99951.344-.55125,2.653.99923,1.51579.17212,1.48106,2.10034-.10281.99866,1.06765-1.27523,2.27421.3798.99924,1.34184.17127.72384-1.79072,1.34332.345,1.99684.20676,1.10155-1.37878.89586.55114-.34452,1.17122.89482,1.00024-.99832,1.89362.62052.72293.27439,2.72312,3.82227,2.101.621-1.27355-.34585-1.55057,2.5149.44719-.62143,1.99881,1.17163.37812.8961.06951,1.54791,1.99829.379,3.10056L80.0064,199.469l-2.8229,2.99633,4.54426,4.7548-1.44507,1.99776-.27629,2.34334a1.97614,1.97614,0,0,1-.27534.138l.10389.13754,2.68473,1.44729.55082,2.72241,1.37821,2.72016,3.9592,1.82579-.06847,2.89667,1.274,2.27321,1.34213-.10452v-1.8951s2.44605-2.892,2.44605-3.09962c0-.17155-.72417-4.16931-.72417-4.16931l-.99775-3.79143.10284-1.377,1.89319-2.34205,1.27514-3.27345.998.65557,2.17019-1.069.068-2.27374,1.55009-.241v-1.82712l1.17039-1.44553,1.27442.27469,1.27347-2.37678,1.446-1.34358,1.44668-1.275,1.54952-1.06736,2.89294-.482H112.856l3.09877.55048,1.34355.44919-.276-3.61907.10351-1.72288.44783-1.51551-.72317-3.54857-.34409-2.55009,2.34131-.99929-.172-.6195Z"/>
<div class="tooltip">1</div>
</svg></div>
Ответы (2 шт):
Автор решения: Grundy
→ Ссылка
Проблема в том, что текст меняется на каждой итерации цикла. А нужно менять вообще не в цикле, так как тултип один.
И для определения текущего региона использовать переменную active
topCoords = $regions[active].getBoundingClientRect().top;
leftCoords = $regions[active].getBoundingClientRect().left;
Пример:
const $regions = document.querySelector('.interactiveMap').children;
let active = -1;
const showRegion = () => {
active = active == $regions.length - 1 ? 0 : active + 1;
let div = document.querySelector('.tooltip');
let topCoords, leftCoords;
for (let i = 0; i < $regions.length; i++) {
$regions[i].classList.toggle('active', i === active);
}
topCoords = $regions[active].getBoundingClientRect().top;
leftCoords = $regions[active].getBoundingClientRect().left;
div.innerHTML = leftCoords;
div.style.left = leftCoords + 'px';
div.style.top = topCoords + 'px';
}
setInterval(showRegion, 500);
.map {
padding-top: 30px;
}
.map__svg {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.map__svg .region {
fill: #ecedf2;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
cursor: pointer;
}
.region.active {
fill: #ff8f1c;
}
.tooltip {
position: absolute;
background-color: blue;
}
<div class="map__svg">
<svg data-name="Interactive map" class="interactiveMap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 601 401">
<path class="region" data-region-title="title 1" data-region-id="0" d="M28.66557,153.43886l2.16948,1.827-.44769.89543-1.72178.06879-.20606,1.72274,3.8217,4.99543,1.27457-1.06713,2.16924.06827,1.06726,2.72231,1.37646,2.72107h3.16913l.99856,1.82621.4476-.93049,2.54889,1.55124,2.16933.55048,1.78982-.20671,1.99684,1.82659,1.54938,2.89477,2.61693.82559.998-.99791.99947.344-.5512,2.653.99923,1.51575.17207,1.48111,2.10034-.10281.9987,1.06765-1.27523,2.27416.3798.99929,1.3418.17127.72389-1.79072,1.34332.345,1.99684.2067,1.10155-1.37873.89581.55114-.34447,1.17122.89477,1.00019-.99828,1.89362.62052.723.27439,2.72307,3.82227,2.101.621-1.27355-.3458-1.55057,2.5149.44719-.62143,1.99881,1.17158.37812.89615.06946,1.54791,1.99829.379,3.10057,1.89423,1.62017-2.82285,2.99633,4.54421,4.7548-1.44507,1.99772-.27629,2.34339c-2.27327,1.101-2.54723,1.20557-2.54723,1.20557l-2.51452-1.37792-1.825,2.447-1.54872.72293L69.78,214.11228l-1.65346-2.27459-1.61837.7243-3.16685-1.34352-1.99764-.8972-3.06415-.2077-1.82634,1.1049-3.16709-2.72207-2.82395-.17193-2.892-1.82622-2.61665-.17193-2.27327,1.89324-4.33762-2.96222-1.1712-2.34243-.72284-2.17007L34.7275,202.364l-1.3786-2.27446-1.79025.93-1.3775,2.44581-1.618,1.34453-1.99741.44743L24.67228,203.982l-.827,1.89643h-1.6177l-.827-.79305.10313-1.82483,1.9975-1.966L22.847,199.366l-.99856-.724.48221-1.06808-1.37684-.82692-1.06826.82692-1.2748-.44757-2.37492.96556-2.06663-1.24067-.72351-1.27412-.10161-3.10176-.99951-1.72293-1.44587-.44781-2.99644-.51722-1.06741-1.3775-.65314-3.72132-1.447-1.06774-1.51556-1.82569-1.72068-1.89524L.5,178.3496l1.27363-4.16874.99936-3.16965,2.44416-1.55109,1.17136-1.51589,3.96011-1.82578.10256-2.1706,1.34332-2.34338.27505-2.652,1.10183-2.23977,1.619-2.5489,1.1014-.82788,2.06568-1.51575.72284-3.27279,1.274-.10319,2.54823,2.99752,3.44447-.17259.79045,1.72231,1.92809.44748Z"/>
<path class="region" data-region-title="title 2" data-region-id="1" d="M49.292,169.84009l1.99684-6.44363,1.61813-.55071L51.66742,161.33l1.17077-2.72217-.10284-.89648,2.10063-2.20419h1.44616v-2.17088l1.72159-1.27455.1725-.79225h.99842l2.06559,1.44644,1.65251-.65419,1.44654.48225,1.54938-1.20642,1.61828,1.20642,1.34317-1.20642,1.65246-.1718.79235.72417,1.27485.44814,1.27338-.7931,1.10136.44734.8952-.44734,3.34-.10295.55125-1.06817.82644.06931.72294,1.10175,1.06807.069.54963-2.61836-1.10112-.34429-1.89361-.27655-1.17053-.82669-.17235-2.16927-1.44735-.55238,1.79115-1.6196.65514.62117.791-1.34358,1.7223-1-.89572-1.72294.99828-1.2745.2771-2.17035,1.06622-3.82431,1.72188.48211-.345,1.17117.89643.79324,1.54867-.72431,3.78747,1.99933h1.27433l.65419-3.342h1.44645l6.06045-3.17055,1.61851-3.82379.89453-.24124.9988.96484,1.54938-2.24-.72317-1.27407.37937-2.171,1.17025.44715,1.99726-1.1705.34528.79215H111.96l.89586-1.06808,1.99684-.44786,1.27376-3.82474.27562-2.17031-2.06625-1.722-1.48-1.27545-.96447-1.99838-1.99641-1.24015-.55234-1.92935s2.17109.55128,1.2738-.72307c-.92824-1.24134-.72146-1.792-.72146-1.792l-.37913-2.37707,1.72159-.62088-.0687-2.16941-3.20218.17112-1.44611-.82621.82668-1.89524-.61957-.99929h-1.2748l-1.1025-1.447-.89491-.17231-.10218,2.06717-1.44749.20714-.17235-1.82645-.89425,1.55147-2.65212.275-1.96289-.99886-.27534-2.17117-2.09992-.99886.1027-1.10243-.99828.1715-.99856-.344,1.17106-3.99628-.6209-.34482-.82526.79244-.896-3.16993-2.61684.27578-1.82458-1.51641L86.962,80.226l-1.068-.89567-1.37674.27549-.72332,1.24054-2.34107-.79244-3.09833-3.37659-1.89495.10385-.06918,2.06755-.55068,2.47959-.37818,2.24044-1.068,1.65319-1.997,1.72306-3.27083.34416h-3.1678l-2.61664.37921-.89681,2.68777L60.17311,92.2851l-5.269,4.0656L52.115,98.5213l-3.33973,1.82525-1.65208,2.343L23.94839,127.53075l2.445,2.17046.27572,5.89124-.44717,5.2372L25.01666,142.759l-.96457.896-.37847,2.89419,2.27327-1.10171,3.71738,4.099L28.563,153.33615v.06893l.10241.03416,2.16948,1.827-.44769.89543-1.72178.06884-.20606,1.72274,3.8217,4.99543,1.27457-1.06713,2.16924.06827,1.06726,2.72231,1.37646,2.72107h3.16913l.99856,1.82621.4476-.93049,2.54889,1.55124,2.16933.55048,1.78982-.17169v-.37878Z"/>
<path class="region" data-region-title="title 3" data-region-id="2" d="M118.67575,179.62391l.34381-.89572-1.06732-1.37873.61971-.79186-.069-1.1031-4.88925-3.89271-.48264-1.8951-.72251-.10347-.79183,1.17146-2.16976-.44852-1.27361-.82678-1.27442-.34348-1.55019.34348-.17117-1.1716.99785-1.44662-.82668-1.0687-1.27338,1.24067-.27591,1.72369-.72294-1.1715-.34447-1.172.34447-1.2745-.06818-.79253-.10322-2.205h-1.72136l-2.06682-.24087-.654-.93035-.17169-1.27479-.55125-.44785-2.169-.0688.10256-1.20656h1.89318l1.27485.82692.55177-.44838-.8274-1.27421v-1.44753l-2.27256-.6197-.551-1.44672-.89491-1.65371,2.99621-2.51622-2.89284-.92916-.82659-3.51484.72322-.72336-.89586-1.37726-.4476-.725h-.65352l-.44812-2.17036.551-.44743-.6538-1.99786-.0697-1.27464H91.12808l-3.78746-1.99938-1.54872.72431-.89638-.7932.345-1.17121-1.72188-.48211-1.06622,3.82436-.2771,2.17031-.99832,1.2745.89572,1.72288-1.72226,1.0001-.791,1.34358-.65514-.62117-1.79115,1.61965,1.44735.55233.17236,2.16926,1.17053.82669L81.797,148.65l1.10112.3443-.54963,2.61831-1.06807-.06893-.72294-1.10176-.82644-.06931-.55125,1.06817-3.34.10295-.8952.44729-1.10135-.44729-1.27338.79305-1.27485-.4481-.79235-.72417-1.65246.17179L67.507,152.54276l-1.61828-1.20642-1.54938,1.20642-1.44654-.48225-1.65251.65419-2.06559-1.44648h-.99842l-.1725.79229-1.72164,1.2745v2.17088H54.83608l-2.10063,2.20419.10284.89653-1.17077,2.72217,1.23952,1.51575-1.61813.55071-1.99684,6.44362v.34372l1.99684,1.82659,1.54938,2.89481,2.61693.82555.998-.99791.99951.344-.55125,2.653.99923,1.51579.17212,1.48106,2.10034-.10281.99866,1.06765-1.27523,2.27421.3798.99924,1.34184.17127.72384-1.79072,1.34332.345,1.99684.20676,1.10155-1.37878.89586.55114-.34452,1.17122.89482,1.00024-.99832,1.89362.62052.72293.27439,2.72312,3.82227,2.101.621-1.27355-.34585-1.55057,2.5149.44719-.62143,1.99881,1.17163.37812.8961.06951,1.54791,1.99829.379,3.10056L80.0064,199.469l-2.8229,2.99633,4.54426,4.7548-1.44507,1.99776-.27629,2.34334a1.97614,1.97614,0,0,1-.27534.138l.10389.13754,2.68473,1.44729.55082,2.72241,1.37821,2.72016,3.9592,1.82579-.06847,2.89667,1.274,2.27321,1.34213-.10452v-1.8951s2.44605-2.892,2.44605-3.09962c0-.17155-.72417-4.16931-.72417-4.16931l-.99775-3.79143.10284-1.377,1.89319-2.34205,1.27514-3.27345.998.65557,2.17019-1.069.068-2.27374,1.55009-.241v-1.82712l1.17039-1.44553,1.27442.27469,1.27347-2.37678,1.446-1.34358,1.44668-1.275,1.54952-1.06736,2.89294-.482H112.856l3.09877.55048,1.34355.44919-.276-3.61907.10351-1.72288.44783-1.51551-.72317-3.54857-.34409-2.55009,2.34131-.99929-.172-.6195Z"/>
<div class="tooltip">1</div>
</svg></div>
Автор решения: Алексей Шиманский
→ Ссылка
Видимо всё потому, что вы делаете это в цикле. Цикл отрабатывает быстро, синхронно и в итоге отображает всегда данные последнего элемента.
const $regions = document.querySelector('.interactiveMap').children;
let active = -1;
const showRegion = () => {
active = active == $regions.length - 1 ? 0 : active + 1;
let div = document.querySelector('.tooltip');
let topCoords, leftCoords;
for (let i = 0; i < $regions.length; i++) {
$regions[i].classList.toggle('active', i === active);
}
let activeElement = document.querySelector('.interactiveMap .active');
topCoords = activeElement.getBoundingClientRect().top;
leftCoords = activeElement.getBoundingClientRect().left;
div.innerHTML = leftCoords;
div.style.left = leftCoords+'px';
div.style.top = topCoords+'px';
}
setInterval(showRegion, 500);
.map {
padding-top: 30px;
}
.map__svg {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.map__svg .region {
fill: #ecedf2;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
cursor: pointer;
}
.region.active {
fill: #ff8f1c;
}
.tooltip {
position: absolute;
background-color: blue;
color: white;
}
<div class="map__svg">
<svg data-name="Interactive map" class="interactiveMap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 601 401">
<path class="region" data-region-title="title 1" data-region-id="0" d="M28.66557,153.43886l2.16948,1.827-.44769.89543-1.72178.06879-.20606,1.72274,3.8217,4.99543,1.27457-1.06713,2.16924.06827,1.06726,2.72231,1.37646,2.72107h3.16913l.99856,1.82621.4476-.93049,2.54889,1.55124,2.16933.55048,1.78982-.20671,1.99684,1.82659,1.54938,2.89477,2.61693.82559.998-.99791.99947.344-.5512,2.653.99923,1.51575.17207,1.48111,2.10034-.10281.9987,1.06765-1.27523,2.27416.3798.99929,1.3418.17127.72389-1.79072,1.34332.345,1.99684.2067,1.10155-1.37873.89581.55114-.34447,1.17122.89477,1.00019-.99828,1.89362.62052.723.27439,2.72307,3.82227,2.101.621-1.27355-.3458-1.55057,2.5149.44719-.62143,1.99881,1.17158.37812.89615.06946,1.54791,1.99829.379,3.10057,1.89423,1.62017-2.82285,2.99633,4.54421,4.7548-1.44507,1.99772-.27629,2.34339c-2.27327,1.101-2.54723,1.20557-2.54723,1.20557l-2.51452-1.37792-1.825,2.447-1.54872.72293L69.78,214.11228l-1.65346-2.27459-1.61837.7243-3.16685-1.34352-1.99764-.8972-3.06415-.2077-1.82634,1.1049-3.16709-2.72207-2.82395-.17193-2.892-1.82622-2.61665-.17193-2.27327,1.89324-4.33762-2.96222-1.1712-2.34243-.72284-2.17007L34.7275,202.364l-1.3786-2.27446-1.79025.93-1.3775,2.44581-1.618,1.34453-1.99741.44743L24.67228,203.982l-.827,1.89643h-1.6177l-.827-.79305.10313-1.82483,1.9975-1.966L22.847,199.366l-.99856-.724.48221-1.06808-1.37684-.82692-1.06826.82692-1.2748-.44757-2.37492.96556-2.06663-1.24067-.72351-1.27412-.10161-3.10176-.99951-1.72293-1.44587-.44781-2.99644-.51722-1.06741-1.3775-.65314-3.72132-1.447-1.06774-1.51556-1.82569-1.72068-1.89524L.5,178.3496l1.27363-4.16874.99936-3.16965,2.44416-1.55109,1.17136-1.51589,3.96011-1.82578.10256-2.1706,1.34332-2.34338.27505-2.652,1.10183-2.23977,1.619-2.5489,1.1014-.82788,2.06568-1.51575.72284-3.27279,1.274-.10319,2.54823,2.99752,3.44447-.17259.79045,1.72231,1.92809.44748Z"/>
<path class="region" data-region-title="title 2" data-region-id="1" d="M49.292,169.84009l1.99684-6.44363,1.61813-.55071L51.66742,161.33l1.17077-2.72217-.10284-.89648,2.10063-2.20419h1.44616v-2.17088l1.72159-1.27455.1725-.79225h.99842l2.06559,1.44644,1.65251-.65419,1.44654.48225,1.54938-1.20642,1.61828,1.20642,1.34317-1.20642,1.65246-.1718.79235.72417,1.27485.44814,1.27338-.7931,1.10136.44734.8952-.44734,3.34-.10295.55125-1.06817.82644.06931.72294,1.10175,1.06807.069.54963-2.61836-1.10112-.34429-1.89361-.27655-1.17053-.82669-.17235-2.16927-1.44735-.55238,1.79115-1.6196.65514.62117.791-1.34358,1.7223-1-.89572-1.72294.99828-1.2745.2771-2.17035,1.06622-3.82431,1.72188.48211-.345,1.17117.89643.79324,1.54867-.72431,3.78747,1.99933h1.27433l.65419-3.342h1.44645l6.06045-3.17055,1.61851-3.82379.89453-.24124.9988.96484,1.54938-2.24-.72317-1.27407.37937-2.171,1.17025.44715,1.99726-1.1705.34528.79215H111.96l.89586-1.06808,1.99684-.44786,1.27376-3.82474.27562-2.17031-2.06625-1.722-1.48-1.27545-.96447-1.99838-1.99641-1.24015-.55234-1.92935s2.17109.55128,1.2738-.72307c-.92824-1.24134-.72146-1.792-.72146-1.792l-.37913-2.37707,1.72159-.62088-.0687-2.16941-3.20218.17112-1.44611-.82621.82668-1.89524-.61957-.99929h-1.2748l-1.1025-1.447-.89491-.17231-.10218,2.06717-1.44749.20714-.17235-1.82645-.89425,1.55147-2.65212.275-1.96289-.99886-.27534-2.17117-2.09992-.99886.1027-1.10243-.99828.1715-.99856-.344,1.17106-3.99628-.6209-.34482-.82526.79244-.896-3.16993-2.61684.27578-1.82458-1.51641L86.962,80.226l-1.068-.89567-1.37674.27549-.72332,1.24054-2.34107-.79244-3.09833-3.37659-1.89495.10385-.06918,2.06755-.55068,2.47959-.37818,2.24044-1.068,1.65319-1.997,1.72306-3.27083.34416h-3.1678l-2.61664.37921-.89681,2.68777L60.17311,92.2851l-5.269,4.0656L52.115,98.5213l-3.33973,1.82525-1.65208,2.343L23.94839,127.53075l2.445,2.17046.27572,5.89124-.44717,5.2372L25.01666,142.759l-.96457.896-.37847,2.89419,2.27327-1.10171,3.71738,4.099L28.563,153.33615v.06893l.10241.03416,2.16948,1.827-.44769.89543-1.72178.06884-.20606,1.72274,3.8217,4.99543,1.27457-1.06713,2.16924.06827,1.06726,2.72231,1.37646,2.72107h3.16913l.99856,1.82621.4476-.93049,2.54889,1.55124,2.16933.55048,1.78982-.17169v-.37878Z"/>
<path class="region" data-region-title="title 3" data-region-id="2" d="M118.67575,179.62391l.34381-.89572-1.06732-1.37873.61971-.79186-.069-1.1031-4.88925-3.89271-.48264-1.8951-.72251-.10347-.79183,1.17146-2.16976-.44852-1.27361-.82678-1.27442-.34348-1.55019.34348-.17117-1.1716.99785-1.44662-.82668-1.0687-1.27338,1.24067-.27591,1.72369-.72294-1.1715-.34447-1.172.34447-1.2745-.06818-.79253-.10322-2.205h-1.72136l-2.06682-.24087-.654-.93035-.17169-1.27479-.55125-.44785-2.169-.0688.10256-1.20656h1.89318l1.27485.82692.55177-.44838-.8274-1.27421v-1.44753l-2.27256-.6197-.551-1.44672-.89491-1.65371,2.99621-2.51622-2.89284-.92916-.82659-3.51484.72322-.72336-.89586-1.37726-.4476-.725h-.65352l-.44812-2.17036.551-.44743-.6538-1.99786-.0697-1.27464H91.12808l-3.78746-1.99938-1.54872.72431-.89638-.7932.345-1.17121-1.72188-.48211-1.06622,3.82436-.2771,2.17031-.99832,1.2745.89572,1.72288-1.72226,1.0001-.791,1.34358-.65514-.62117-1.79115,1.61965,1.44735.55233.17236,2.16926,1.17053.82669L81.797,148.65l1.10112.3443-.54963,2.61831-1.06807-.06893-.72294-1.10176-.82644-.06931-.55125,1.06817-3.34.10295-.8952.44729-1.10135-.44729-1.27338.79305-1.27485-.4481-.79235-.72417-1.65246.17179L67.507,152.54276l-1.61828-1.20642-1.54938,1.20642-1.44654-.48225-1.65251.65419-2.06559-1.44648h-.99842l-.1725.79229-1.72164,1.2745v2.17088H54.83608l-2.10063,2.20419.10284.89653-1.17077,2.72217,1.23952,1.51575-1.61813.55071-1.99684,6.44362v.34372l1.99684,1.82659,1.54938,2.89481,2.61693.82555.998-.99791.99951.344-.55125,2.653.99923,1.51579.17212,1.48106,2.10034-.10281.99866,1.06765-1.27523,2.27421.3798.99924,1.34184.17127.72384-1.79072,1.34332.345,1.99684.20676,1.10155-1.37878.89586.55114-.34452,1.17122.89482,1.00024-.99832,1.89362.62052.72293.27439,2.72312,3.82227,2.101.621-1.27355-.34585-1.55057,2.5149.44719-.62143,1.99881,1.17163.37812.8961.06951,1.54791,1.99829.379,3.10056L80.0064,199.469l-2.8229,2.99633,4.54426,4.7548-1.44507,1.99776-.27629,2.34334a1.97614,1.97614,0,0,1-.27534.138l.10389.13754,2.68473,1.44729.55082,2.72241,1.37821,2.72016,3.9592,1.82579-.06847,2.89667,1.274,2.27321,1.34213-.10452v-1.8951s2.44605-2.892,2.44605-3.09962c0-.17155-.72417-4.16931-.72417-4.16931l-.99775-3.79143.10284-1.377,1.89319-2.34205,1.27514-3.27345.998.65557,2.17019-1.069.068-2.27374,1.55009-.241v-1.82712l1.17039-1.44553,1.27442.27469,1.27347-2.37678,1.446-1.34358,1.44668-1.275,1.54952-1.06736,2.89294-.482H112.856l3.09877.55048,1.34355.44919-.276-3.61907.10351-1.72288.44783-1.51551-.72317-3.54857-.34409-2.55009,2.34131-.99929-.172-.6195Z"/>
<div class="tooltip">1</div>
</svg></div>