SVG 그래픽에 툴팁을 추가하는 방법은 무엇입니까?

Question 1

일련의 svg 사각형 (D3.js 사용)이 있고 마우스 오버시 메시지를 표시하고 싶습니다. 메시지는 배경 역할을하는 상자로 둘러싸여 있어야합니다. 둘 다 서로와 직사각형 (상단 및 중앙)에 완벽하게 정렬되어야합니다. 이를 수행하는 가장 좋은 방법은 무엇입니까?

"x", "y", "width"및 "height"속성을 사용하여 svg 텍스트를 추가 한 다음 svg rect를 추가해 보았습니다. 문제는 텍스트의 참조 점이 중간에 있다는 것입니다 (내가 사용한 가운데 정렬되기를 원하기 때문에 text-anchor: middle).하지만 사각형의 경우 왼쪽 상단 좌표이고 텍스트 주위에 약간의 여백을 원했기 때문에 고통.

다른 옵션은 html div를 사용하는 것이 었는데, 텍스트와 패딩을 직접 추가 할 수 있지만 각 직사각형의 절대 좌표를 얻는 방법을 모르기 때문에 좋을 것입니다. 이를 수행하는 방법이 있습니까?

Question 2

Phrogz가 지정한대로 제목 요소를 사용할 수 있습니다. jQuery의 Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (모든 제목 요소를 대체하는 데 사용할 수 있음), Bob Monteverde의 nvd3 또는 심지어 Bootstrap http : // 의 Twitter 도구 설명과 같은 유용한 도구 설명도 있습니다 . twitter.github.com/bootstrap/

Question 3

단순히 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가 필요합니다. 위에 표시된 것처럼 레이블을 올바른 위치에 표시하는 한 가지 방법은 rect와 HTML을 <g>모두 함께 배치 하는 동일한 위치 에 래핑하는 것입니다.

JS를 사용하여 SVG 요소가 화면에있는 위치를 찾으려면을 사용할 수 있습니다 getBoundingClientRect(). 예 : http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

Question 4

내가 찾은 유일한 좋은 방법은 Javascript를 사용하여 툴팁을 이동하는 <div>것입니다. 분명히 이것은 독립형이 아닌 HTML 문서 안에 SVG가있는 경우에만 작동합니다. 그리고 자바 스크립트가 필요합니다.

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>

스 니펫 확장

Question 5

나는 항상 내 설정과 함께 일반적인 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);

그리고 크롬 스크린 샷 ...

Question 6

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

스 니펫 확장

Question 7

SVG에서 제목을 쓰는 올바른 방법

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

자세한 내용은 여기에서 확인하십시오 https://css-tricks.com/svg-title-vs-html-title-attribute/