1

Здесь описано решение, как вывести текст на SVG с помощью JS и CSS: https://ru.stackoverflow.com/questions/1275925/как-при-наведении-на-svg-добиться-появления-текста/

Возможно ли похожим способом вывести разный текст для разных элементов одного SCG?

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<g><circle cx="1" cy="1" r=".4"/><title>Circle 1</title></g>
<g><circle cx="1" cy="2" r=".4"/><title>Circle 2</title></g>
<g><circle cx="2" cy="1" r=".4"/><title>Circle 3</title></g>
<g><circle cx="2" cy="2" r=".4"/><title>Circle 4</title></g>
</svg>

Этот код работает на ПК, но не работает на мобильном телефоне, так как наводить нечего. А нужно, чтобы работал и на мобильных устройствах.

6
  • 1
    В заголовке вы пишете "при наведении курсора", а в тексте вопроса "наводить нечего". Так что конкретно вы хотите-то, если наводить нечего?
    – andreymal
    Commented 22 июн. 2023 в 12:07
  • Спасибо, поправил заголовок. Речь именно об отображении текста на мобильных устройствах, т.е. без наведения курсора, т.е. по такому же принципу с помощью CSS+JS как сделано в приведенной ссылке, но там только 1 элемент SVG и один вариант всплывающего текста, а нужно разный текст для разных элементов.
    – Evgeny
    Commented 22 июн. 2023 в 12:28
  • Такие же условия только click Commented 22 июн. 2023 в 12:48
  • К сожалению, кажется, без конкретного кода не могу разобраться, куда именно и где нужно добавить click
    – Evgeny
    Commented 22 июн. 2023 в 18:41
  • Решение найдено
    – Evgeny
    Commented 23 июн. 2023 в 7:35

1 ответ 1

2

Решение найдено с помощью этого урока: https://www.petercollingridge.co.uk/tutorials/svg/interactive/tooltip/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20" id="tooltip-svg-4">
    <style>
        #tooltip {
        font-size: 1px;
            dominant-baseline: hanging; 
                   }
    </style>


<g><circle cx="1" cy="1" r=".4" class="tooltip-trigger" data-tooltip-text="Circle 1"/></g>
<g><circle cx="1" cy="2" r=".4" class="tooltip-trigger" data-tooltip-text="Circle 2"/></g>
<g><circle cx="2" cy="1" r=".4" class="tooltip-trigger" data-tooltip-text="Circle 3"/></g>
<g><circle cx="2" cy="2" r=".4" class="tooltip-trigger" data-tooltip-text="Circle 4"/></g>

<text id="tooltip" x="0" y="0" visibility="hidden" >Tooltip</text>


    <script type="text/ecmascript"><![CDATA[
        (function() {
            var svg = document.getElementById('tooltip-svg-4');
            var tooltip = svg.getElementById('tooltip');
            var triggers = svg.getElementsByClassName('tooltip-trigger');
            for (var i = 0; i < triggers.length; i++) {
                triggers[i].addEventListener('mousemove', showTooltip);
                triggers[i].addEventListener('mouseout', hideTooltip);
            }
            function showTooltip(evt) {
                var CTM = svg.getScreenCTM();
                var mouseX = (evt.clientX - CTM.e) / CTM.a;
                var mouseY = (evt.clientY - CTM.f) / CTM.d;
                tooltip.setAttributeNS(null, "x", mouseX + 6 / CTM.a);
                tooltip.setAttributeNS(null, "y", mouseY + 20 / CTM.d);
                tooltip.setAttributeNS(null, "visibility", "visible");
                tooltip.firstChild.data = evt.target.getAttributeNS(null, "data-tooltip-text");
            }
            function hideTooltip(evt) {
                tooltip.setAttributeNS(null, "visibility", "hidden");
            }
        })()
    ]]></script>

</svg>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.