私は（D3.jsを使用して）一連のsvg矩形を持っていて、マウスオーバー時にメッセージを表示したい場合、メッセージは背景として機能するボックスに囲まれている必要があります。それらは、お互いに、そして矩形（上と中央に）に完全に整列する必要があります。これを行う最善の方法は何ですか？svgグラフィックにツールチップを追加するには？
"x"、 "y"、 "width"、 "height"属性を使用してsvgテキストを追加してから、svg rectを追加してみました。問題は、テキストの参照ポイントが中間にあることです（私はtext-anchor: middleを使用して中央揃えにしたいので）。しかし、四角形の場合は左上の座標です。痛み
もう1つのオプションは、テキストとパディングを直接追加することができますが、各矩形の絶対座標を取得する方法がわからないため、html divを使用していました。これを行う方法はありますか？
タイトル要素は、指定されたPhrogzとして使用できます。ブートストラップhttp://twitter.github.com/bootstrap/が
単にSVG <title> elementとそれを伝えるデフォルトのブラウザを使用できますか？ （注：これはtitleは、DIV/IMG/HTMLでまたがるに使用できる属性として、それはtitleという名前の子要素にする必要が同じないです）
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}<p>Mouseover the rect to see the tooltip on supporting browsers.</p>
<svg xmlns="http://www.w3.org/2000/svg">
<rect>
<title>Hello, World!</title>
</rect>
</svg>あるいは、あなたは直接HTMLを埋め込むことができます。
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}
foreignObject {
width: 100%;
}
svg div {
text-align: center;
line-height: 150px;
}<svg xmlns="http://www.w3.org/2000/svg">
<rect/>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
Hello, <b>World</b>!
</div>
</body>
</foreignObject>
</svg>...しかし、ディスプレイをオン/オフするにはJSが必要です。上に示したように、正しい場所にラベルを表示する方法の1つは、rectとHTMLを同じ位置に置く同じ<g>にラップすることです。
JSを使用してSVG要素が画面上のどこにあるかを調べるには、getBoundingClientRect()を使用します。 http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
私はsvg要素にタイトルを挿入するためにうまく動作します！ –
良い答え。しかし、 'foreignObject'は[Internet Explorerではサポートされていません]（https://caniuse.com/#search=foreignObject） –
他に方法がない場合、私は – nachocab
を推測する彼らからいくつかの良いjQueryのほろ酔いhttp://onehackoranother.com/projects/jquery/tipsy/（すべてのtitle要素を置き換えるために使用することができる）、ボブ・モンテベルデのnvd3などのツールチップ、あるいはTwitterのツールチップもあり、問題点でありますそのために設計されたマークアップを使用していますか？ – Phrogz
それはちょっといいとは思えませんが、私はあなたの答えに感謝します – nachocab