Как отобразить текст в SVG без наведения курсора с помощью JS и CSS?

Рейтинг: 1Ответов: 1Опубликовано: 22.06.2023

Здесь описано решение, как вывести текст на 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>

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

css javascript svg
Источник: Stack Overflow на русском

Ответы

▲ 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>