Jak dodać podpowiedź do grafiki SVG?

Question 1

Mam serię prostokątów svg (używając D3.js) i chcę wyświetlić komunikat po najechaniu myszą, wiadomość powinna być otoczona ramką, która działa jako tło. Powinny być idealnie wyrównane względem siebie i prostokąta (na górze i na środku). Jaki jest najlepszy sposób, aby to zrobić?

Próbowałem dodać tekst svg, używając atrybutów „x”, „y”, „szerokość” i „wysokość”, a następnie wstawiłem na początku prostokąt svg. Problem polega na tym, że punkt odniesienia dla tekstu znajduje się pośrodku (ponieważ chcę, aby był wyśrodkowany, użyłem text-anchor: middle), ale dla prostokąta jest to współrzędna górna lewa, plus chciałem trochę marginesu wokół tekstu, co sprawia, że jest trochę ból.

Inną opcją było użycie elementu div html, co byłoby fajne, ponieważ mogę bezpośrednio dodać tekst i wypełnienie, ale nie wiem, jak uzyskać bezwzględne współrzędne dla każdego prostokąta. Czy jest na to sposób?

Question 2

Możesz użyć elementu tytułu, jak wskazano w Phrogz. Istnieją również dobre podpowiedzi, takie jak Wskazówki jQuery http://onehackoranother.com/projects/jquery/tipsy/ (które mogą być użyte do zastąpienia wszystkich elementów tytułu), nvd3 Boba Monteverde lub nawet podpowiedź Twittera z ich Bootstrap http: // twitter.github.com/bootstrap/

Question 3

Czy możesz użyć po prostu elementu SVG<title> i domyślnej przeglądarki, którą on przekazuje? (Uwaga: to nie to samo, co titleatrybut, którego możesz użyć w div / img / spans w html, musi to być element podrzędny o nazwie 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>

Rozwiń fragment

Alternatywnie, jeśli naprawdę chcesz wyświetlić HTML w swoim SVG, możesz bezpośrednio osadzić 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>

Rozwiń fragment

… Ale wtedy do włączania i wyłączania wyświetlacza potrzebny byłby JS. Jak pokazano powyżej, jednym ze sposobów umieszczenia etykiety we właściwym miejscu jest umieszczenie prostego i HTML w tym samym <g>miejscu, które ustawia je razem.

Aby użyć JS do znalezienia, gdzie na ekranie znajduje się element SVG, możesz użyć getBoundingClientRect()np. Http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

Question 4

Jedynym dobrym sposobem, jaki znalazłem, było użycie Javascript do przesuwania podpowiedzi <div>. Oczywiście działa to tylko wtedy, gdy w dokumencie HTML znajduje się SVG - a nie samodzielny. I wymaga 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>

Rozwiń fragment

Question 5

Zawsze używam ogólnego tytułu CSS w mojej konfiguracji. Po prostu tworzę statystyki dla mojej strony administratora bloga. Nie potrzebuję niczego wymyślnego. Oto kod ...

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);

I zrzut ekranu z chrome ...

Question 6

Wymyśliłem coś, używając tylko HTML + CSS. Mam nadzieję, że to działa dla Ciebie

.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">علاقه&zwnj;مندی&zwnj;ها</div></div>

Rozwiń fragment

Question 7

Na svg, właściwy sposób zapisu tytułu

<svg>
  <title id="unique-id">Checkout</title>
</svg>

sprawdź tutaj, aby uzyskać więcej informacji https://css-tricks.com/svg-title-vs-html-title-attribute/