Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Как создать всплывающую подсказку SVG?

Автор вопроса: moraisОтветов: 4

Учитывая существующий действительный документ SVG, как лучше всего создать "информационные всплывающие окна", чтобы при наведении курсора или щелчке по определенным элементам (скажем), вы появлялись всплывающие окна с произвольным количеством (т. е. не просто всплывающей подсказкой с одной строкой) Дополнительная информация?

Это должно отображаться правильно, по крайней мере, в Firefox и быть невидимым, если изображение было растрировано в растровый формат.

  • Мораис, это может помочь, если вы немного сузите вопрос. Может быть, немного более конкретно о том, какие технологии вам доступны и какие браузеры вам нужно поддерживать (Firefox и какие еще?) Просто предложение. Onorio Catenacci 19.09.2008
  • Принятый ответ устарел, но ответ Нила Фрейзера по-прежнему верен. Craig 22.12.2014

svgpopuptooltip

Ответы

Ответ 1 · рейтинг 25 · Sparr

<svg>
  <text id="thingyouhoverover" x="50" y="35" font-size="14">Mouse over me!</text>
  <text id="thepopup" x="250" y="100" font-size="30" fill="black" visibility="hidden">Change me
    <set attributeName="visibility" from="hidden" to="visible" begin="thingyouhoverover.mouseover" end="thingyouhoverover.mouseout"/>
  </text>
</svg>

Дополнительные пояснения можно найти здесь а>.

Ответ 2 · рейтинг 53 · Neil Fraser

Этот вопрос был задан в 2008 году. За прошедшие четыре года SVG быстро улучшилась. Теперь всплывающие подсказки полностью поддерживаются на всех известных мне платформах. Используйте тег <title> (не атрибут), и вы получите встроенную всплывающую подсказку.

Вот документы: https://developer.mozilla.org/en-US/docs/SVG/Element/title

Ответ 3 · рейтинг 2 · Peter Collingridge

Поскольку элемент <set> не работает с Firefox 3, я думаю, вам придется использовать ECMAScript.

Если вы добавите следующий элемент скрипта в свой SVG:

  <script type="text/ecmascript"> <![CDATA[

    function init(evt) {
        if ( window.svgDocument == null ) {
        // Define SGV
        svgDocument = evt.target.ownerDocument;
        }
        tooltip = svgDocument.getElementById('tooltip');
    }

    function ShowTooltip(evt) {
        // Put tooltip in the right position, change the text and make it visible
        tooltip.setAttributeNS(null,"x",evt.clientX+10);
        tooltip.setAttributeNS(null,"y",evt.clientY+30);
        tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext");
        tooltip.setAttributeNS(null,"visibility","visible");
    }

    function HideTooltip(evt) {
        tooltip.setAttributeNS(null,"visibility","hidden");
    }
    ]]></script>

Вам нужно добавить onload="init(evt)" в элемент SVG, чтобы вызвать функцию init().

Затем в конец SVG добавьте текст всплывающей подсказки:

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

Наконец, к каждому элементу, для которого вы хотите иметь функцию наведения мыши, добавьте:

onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"

Я написал более подробное объяснение с улучшенной функциональностью по адресу http://www.petercollingridge.co.uk/interactive-svg-components/tooltip

Я еще не включил многострочные всплывающие подсказки, для которых потребовалось бы несколько элементов <tspan> и ручной перенос слов.

Ответ 4 · рейтинг 1 · Aravind Cheekkallur

Это должно работать:

nodeEnter.append("svg:element")
   .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
   .append("svg:title")
   .text(function(d) {return d.Name+"\n"+d.Age+"\n"+d.Dept;}); // It shows the tool tip box with item [Name,Age,Dept] and upend to the svg dynamicaly

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы