Учитывая существующий документ SVG, как лучше всего создать «информационные всплывающие окна», так что, когда вы наводите или нажимаете на определенные элементы (скажем), вы выпадаете в поле с произвольной суммой (т. Е. Не только с одной строкой всплывающей подсказки) дополнительной информации?Как создать SVG-подсказку?
Это должно отображаться корректно, по крайней мере, в Firefox и быть невидимым, если изображение было растрировано в растровый формат.
<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>
Дополнительное разъяснение может быть найдено here.
Это, похоже, не работает в Firefox 3.0.1 - это должно быть? – morais 2008-09-22 15:01:39
Поскольку элемент <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>
Наконец, для каждого из элементов, которые вы хотите иметь функцию Mouseover надстройку:
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"
I 'более подробное объяснение с улучшенной функциональностью на http://www.petercollingridge.co.uk/interactive-svg-components/tooltip
Я еще не включил многострочные всплывающие подсказки, для чего потребуется несколько <tspan> элементы и ручная перенос слов.
Этот вопрос задан в 2008 году. SVG быстро улучшился в течение четырех лет. Теперь всплывающие подсказки полностью поддерживаются на всех платформах, о которых я знаю. Используйте тег <title> (не атрибут), и вы получите встроенную подсказку.
Вот документы: https://developer.mozilla.org/en-US/docs/SVG/Element/title
Это должно работать:
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
Мораиш это может помочь, если вы сузили немного вопрос. Может быть, немного конкретнее о том, какие технологии доступны для вас и какие браузеры вам нужны для поддержки (Firefox и что еще?) Просто предложение. – 2008-09-19 15:27:23
Принятый ответ теперь устаревший, но тот, который Нил Фрейзер по-прежнему прав. – Craig 2014-12-21 23:39:26