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

일련의 svg 사각형 (D3.js 사용)이 있는데 마우스 오버시 메시지를 표시하려면 메시지가 배경 역할을하는 상자로 둘러싸여 야합니다. 그들은 서로 완벽하게 정렬되어야하고 직사각형 (상단 및 가운데에)에 정렬되어야합니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?svg 그래픽에 툴팁을 추가하는 방법은 무엇입니까?

"x", "y", "width"및 "height"속성을 사용하여 svg 텍스트를 추가하고 svg rect 앞에 추가하려고했습니다. 문제는 텍스트의 참조 점이 가운데에 있기 때문에 (왼쪽부터 text-anchor: middle을 사용하여 가운데 정렬해야 함) 사각형의 왼쪽 위 좌표이며, 텍스트 주위에 약간의 여백을두고 싶습니다. 고통의.

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

출처

2012-05-17 nachocab

다른 방법이 없다면, 나는 – nachocab

를 추측 자신의 좋은 jQuery의 기운 http://onehackoranother.com/projects/jquery/tipsy/ (모든 제목 요소를 대체 할 수있는), 밥 몬테 베르데의 nvd3 같은 툴팁 또는 트위터의 툴팁도 있습니다 문제인가요 , 무엇을 위해 설계된 마크 업을 사용 하는가? – Phrogz

그냥 멋지게 보이지 않지만 그 대답에 감사드립니다. – nachocab

Phrogz로 표시된 제목 요소를 사용할 수 있습니다. 부트 스트랩 http://twitter.github.com/bootstrap/이

출처

2012-05-17 21:06:19 paxRoman

단순히 SVG <title> element과 기본 렌더링 브라우저를 사용할 수 있습니까? (참고 :이이 title 당신이 사업부에서 사용할 수있는 속성과 같은 하지입니다은/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>

당신이 정말로 당신의 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

출처

2012-05-17 21:06:16 Phrogz

svg 요소에 제목을 삽입 할 때 잘 작동합니다! –

좋은 답변입니다. 그러나 'foreignObject'는 [Internet Explorer에서 지원되지 않습니다.] (https://caniuse.com/#search=foreignObject) –

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

답변

관련 문제