Задать вопрос
b_alex
@b_alex
javascript

Как реализовать для svg вывод подсказки (hint) при количестве блоков более 30 единиц?

1) Как реализовать сбор координат курсора и передачу на вывод блоку подсказке-div для каждого активного элемента svg?
2) Какой правильный путь, если блоков подсказки +/- 30 единиц: создавать div для каждого элемента svg и при активной ссылке выводить из display: none? Логика намекает на скрипт + массив данных для блоков div.

Реализация на примере html + svg
page.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .note{
            position: absolute;
            width: 80px;
            background-color: #e2d79b;
            text-align: center;
        }
        .num{background-color: #e2d79b;
        }
        .name{background-color: #9fcdff;
        }
        .stat{background-color: #b9bbbe;
        }
    </style>
</head>
<body>
<object data="doc.svg" type="image/svg+xml"></object>
<div class="note" style="left: 40px">
    <p class="num">подсказка 1</p>
    <p class="name">первый квадрат</p>
    <p class="stat">статус 1</p>
</div>
<div class="note" style="left: 140px">
    <p class="num">подсказка 2</p>
    <p class="name">второй квадрат</p>
    <p class="stat">статус 2</p>
</div>

<div class="note" style="left: 240px">
    <p class="num">подсказка 3</p>
    <p class="name">третий квадрат</p>
    <p class="stat">статус 3</p>
</div>

<div class="note" style="left: 340px">
    <p class="num">подсказка 4</p>
    <p class="name">четвертый квадрат</p>
    <p class="stat">статус 4</p>
</div>

<div class="note" style="left: 440px">
    <p class="num">подсказка 5</p>
    <p class="name">пятый квадрат</p>
    <p class="stat">статус 5</p>
</div>

</body>
</html>

doc.svg
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="500" height="70">

    <a xlink:href="#" id="arect1" opacity="1"
       onmouseover="setAttribute('style', 'opacity: 0.5;');"
       onmouseout="setAttribute('style', 'opacity: 1;');" >
        <rect id="rect1"  x="50" y="10"
              width="50" height="50" fill="blue"
              onmouseover="evt.target.setAttribute('fill','red');"
              onmouseout="evt.target.setAttribute('fill','blue');"/>
    </a>

    <a xlink:href="#" id="arect2" opacity="1"
       onmouseover="setAttribute('style', 'opacity: 0.5;');"
       onmouseout="setAttribute('style', 'opacity: 1;');" >
        <rect id="rect2" x="150" y="10"
              width="50" height="50" fill="blue"
              onmouseover="evt.target.setAttribute('fill','red');"
              onmouseout="evt.target.setAttribute('fill','blue');"/>
    </a>

    <a xlink:href="#" id="arect3" opacity="1"
       onmouseover="setAttribute('style', 'opacity: 0.5;');"
       onmouseout="setAttribute('style', 'opacity: 1;');" >
        <rect id="rect3" x="250" y="10"
              width="50" height="50" fill="blue"
              onmouseover="evt.target.setAttribute('fill','red');"
              onmouseout="evt.target.setAttribute('fill','blue');"/>
    </a>
    <a xlink:href="#" id="arect4" opacity="1"
       onmouseover="setAttribute('style', 'opacity: 0.5;');"
       onmouseout="setAttribute('style', 'opacity: 1;');" >
        <rect id="rect4" x="350" y="10"
              width="50" height="50" fill="blue"
              onmouseover="evt.target.setAttribute('fill','red');"
              onmouseout="evt.target.setAttribute('fill','blue');"/>
    </a>

    <a xlink:href="#" id="arect5" opacity="1"
       onmouseover="setAttribute('style', 'opacity: 0.5;');"
       onmouseout="setAttribute('style', 'opacity: 1;');" >
        <rect id="rect5" x="450" y="10"
              width="50" height="50" fill="blue"
              onmouseover="evt.target.setAttribute('fill','red');"
              onmouseout="evt.target.setAttribute('fill','blue');"/>
    </a>
</svg>
Print Screen Browser
5a18ac30deff4260791559.png
Print Screen Browser Result
5a18b15219a28730791978.png
  • Вопрос задан
  • 942 просмотра
Комментировать
Подписаться 2 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
Да, логика правильно намекает. Кроме того, ВЕСЬ код с mouseover и mouseout можно выбросить.
https://jsfiddle.net/xg2au0r1/

Теперь можно навесить обработчик, который будет показывать подсказки при наведении.
https://jsfiddle.net/xg2au0r1/1/
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать сервер VPS через wireguard
24 нояб. 2024, в 00:04
5000 руб./за проект
Добавить интеграцию оплаты Telegram Payments 2.0 в Mini App (React)
23 нояб. 2024, в 23:30
3000 руб./за проект
Нарисовать инфографику в 3-х вариантах
23 нояб. 2024, в 23:03
1 руб./за проект
Ещё заказы