（D3.jsを使用して）一連のsvg長方形があり、マウスオーバーでメッセージを表示したいのですが、メッセージは背景として機能するボックスで囲まれている必要があります。それらは両方とも、互いに完全に位置合わせされ、長方形（上部と中央）に完全に位置合わせされている必要があります。これを行うための最良の方法は何ですか？
「x」、「y」、「width」、「height」属性を使用してsvgテキストを追加してから、svgrectを付加してみました。問題は、テキストの参照点が中央にあることです（中央に揃えたいので、使用しましたtext-anchor: middle）が、長方形の場合は左上の座標であり、テキストの周りに少しマージンが必要でした。痛み。
もう1つのオプションは、html divを使用することでした。これは、テキストとパディングを直接追加できますが、各長方形の絶対座標を取得する方法がわからないためです。これを行う方法はありますか？
回答:
Phrogzが示すようにtitle要素を使用できます。jQueryのTipsyhttp ： //onehackoranother.com/projects/jquery/tipsy/のような優れたツールチップもいくつかあります。（すべてのtitle要素を置き換えるために使用することができる）、ボブ・モンテベルデのnvd3またはそのブートストラップからでもTwitterのツールチップはhttp：// twitter.github.com/bootstrap/
SVG<title>要素とそれが伝えるデフォルトのブラウザレンダリングを単純に使用できますか？（注：これは、htmlのdiv / img / spansで使用できる属性と同じではありません。名前の付いtitleた子要素である必要があります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>または、本当にSVGにHTMLを表示したい場合は、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を使用できます。
foreignObject 、Internet Explorerではサポートされていない
<rect width="200" height="50"></rect>
<title>、モバイルデバイスには影響しません。
私が見つけた唯一の良い方法は、Javascriptを使用してツールチップを移動すること<div>でした。明らかに、これは、スタンドアロンではなく、HTMLドキュメント内にSVGがある場合にのみ機能します。そしてそれはJavascriptを必要とします。
function showTooltip(evt, text) {
let tooltip = document.getElementById("tooltip");
tooltip.innerHTML = text;
tooltip.style.display = "block";
tooltip.style.left = evt.pageX + 10 + 'px';
tooltip.style.top = evt.pageY + 10 + 'px';
}
function hideTooltip() {
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}#tooltip {
background: cornsilk;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}<div id="tooltip" display="none" style="position: absolute; display: none;"></div>
<svg>
<rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >
</rect>
</svg>私はいつも、セットアップで一般的なcssタイトルを使用します。ブログ管理ページの分析を構築しているだけです。特別なものは必要ありません。ここにいくつかのコードがあります...
let comps = g.selectAll('.myClass')
.data(data)
.enter()
.append('rect')
...styling...
...transitions...
...whatever...
g.selectAll('.myClass')
.append('svg:title')
.text((d, i) => d.name + '-' + i);
そしてクロムのスクリーンショット...
HTML + CSSのみを使用して何かを思いついた。それがあなたのために働くことを願っています
.mzhrttltp {
position: relative;
display: inline-block;
}
.mzhrttltp .hrttltptxt {
visibility: hidden;
width: 120px;
background-color: #040505;
font-size:13px;color:#fff;font-family:IranYekanWeb;
text-align: center;
border-radius: 3px;
padding: 4px 0;
position: absolute;
z-index: 1;
top: 105%;
left: 50%;
margin-left: -60px;
}
.mzhrttltp .hrttltptxt::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #040505 transparent;
}
.mzhrttltp:hover .hrttltptxt {
visibility: visible;
}<div class="mzhrttltp"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#e2062c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><div class="hrttltptxt">علاقه‌مندی‌ها</div></div>