Ivanizukhty,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
svg {
border: 1px solid red;
}
path.hover {
opacity: .2;
}
[data-area].hover {
border: 1px solid red;
}
</style>
</head>
<body>
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path id="r1" d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="rgba(255, 0, 0, 1.0)" class="area" />
<path id="r2" d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="rgba(0, 100, 0, 1.0)" class="area" />
<path id="r3" d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="rgba(255, 20, 147, 1.0)" class="area" />
<path id="r4" d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="rgba(255, 255, 0, 1.0)" class="area" />
</svg>
<table class="table">
<tr>
<td data-area="0">1</td>
</tr>
<tr>
<td data-area="1">2</td>
</tr>
<tr>
<td data-area="2">3</td>
</tr>
<tr>
<td data-area="3">4</td>
</tr>
<tr>
<td data-area="0,1">1 + 2</td>
</tr>
<tr>
<td data-area="0,1,2,3">1+2+3+4</td>
</tr>
</table>
<script>
let table = document.querySelector(".table");
let svg = document.querySelector("svg");
let area = Array.from(document.querySelectorAll(".area"));
let tds = document.querySelectorAll("[data-area]");
let temp = [];
table.addEventListener("mouseover", ({
target
}) => {
if (target = target.closest("[data-area]")) {
temp = target.dataset.area.split(",");
temp.forEach(i => area[i].classList.add("hover"))
}
});
table.addEventListener("mouseout", _ => {
if (temp.length) {
temp.forEach(i => area[i].classList.remove("hover"));
temp = [];
}
});
svg.addEventListener("mouseover", ({
target
}) => {
if (target = target.closest(".area")) {
let i = area.indexOf(target) + "";
tds.forEach(td => {
let arr = td.dataset.area.split(",");
if (arr.includes(i)) td.classList.add("hover")
})
}
});
svg.addEventListener("mouseout", ({
target
}) => {
if (target = target.closest(".area")) {
tds.forEach(td => {
td.classList.remove("hover")
})
}
});
</script>
</body>
</html>