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는 지난 4년 동안 급속히 발전했습니다.이제 제가 알고 있는 모든 플랫폼에서 툴팁이 완벽하게 지원됩니다.사용 <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)"
init() 함수를 호출하기 위해 SVG 요소에 추가합니다.
그런 다음 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