SVG の「ツールチップ」のようなボックスを作成するにはどうすればよいですか?
質問
既存の有効な SVG ドキュメントが与えられた場合、特定の要素 (たとえば ) にカーソルを合わせるかクリックすると、任意の量のボックス (つまり、単なる 1 行のツールチップではなく、追加情報が含まれていますか?
これは少なくとも 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)"
を 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>
要素と手動のワードラッピング。
これは機能するはずです:
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