Как создать поле, похожее на «подсказку» 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>
Дальнейшее объяснение можно найти здесь.
Другие советы
Этот вопрос был задан в 2008 году.За прошедшие четыре года SVG быстро улучшился.Теперь всплывающие подсказки полностью поддерживаются на всех известных мне платформах.Использовать <title>
тег (не атрибут), и вы получите встроенную подсказку.
Вот документы:https://developer.mozilla.org/en-US/docs/SVG/Element/title
Поскольку <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-comComponents/tooltip
Я еще не включил многострочные всплывающие подсказки, для которых потребовалось бы несколько <tspan>
элементы и ручной перенос слов.
Это должно работать:
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