Показать сообщение отдельно
  #3 (permalink)  
Старый 18.01.2022, 00:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

svg hover from dataset
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>

Последний раз редактировалось рони, 22.01.2022 в 21:13.
Ответить с цитированием