110

一連の svg 長方形 (D3.js を使用) があり、マウスオーバー時にメッセージを表示したい場合、メッセージは背景として機能するボックスで囲む必要があります。それらは両方とも、互いに完全に整列し、長方形に完全に整列する必要があります (上部と中央)。これを行う最善の方法は何ですか？

「x」、「y」、「width」、「height」属性を使用して svg テキストを追加してから、svg rect を追加しようとしました。問題は、テキストの基準点が中央にあることです (使用した中央揃えにしたいのでtext-anchor: middle) が、長方形の場合は左上の座標であり、さらにテキストの周りに少し余白が必要でした。痛み。

テキストとパディングを直接追加することはできますが、各長方形の絶対座標を取得する方法がわかりません。これを行う方法はありますか？

4

7 に答える 7

194

SVG<title>要素とそれが伝えるデフォルトのブラウザ レンダリングを単純に使用できますか? (注: これは、html の div/img/spans で使用できる属性と同じではありません。という名前の子要素である必要があります)titletitle

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を使用できます。

于 2012-05-17T21:06:16.947 に答える
17

Phrogz が示すように、title 要素を使用できます。jQuery の Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (すべてのタイトル要素を置き換えるために使用できます)、Bob Monteverde の nvd3、または Bootstrap からの Twitter のツールチップhttp:// twitter.github.com/bootstrap/

于 2012-05-17T21:06:19.923 に答える
4

私は常に、セットアップで一般的な 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);

そしてクロムのスクリーンショット...

ここに画像の説明を入力

于 2018-09-17T21:09:25.840 に答える