SVG에서 다각형의 호버에 텍스트 표시

Question

svg 다각형 모양의 호버에 텍스트를 추가 할 수 있습니까?

하나의 폴리곤 만 사례가 나는 많은 참조를 확인,하지만 내 코드에 내가 다른 텍스트와 4 모양을 필요로이

<svg> 
 
    <polygon class="st0" points="0,1.833 638,1.833 383,348.833 0,348.833 "/> 
 
    <polygon class="st0" points="0,355.333 649,355.333 891.5,664.833 0,664.833 "/> 
 
    <polygon class="st0" points="392.5,348.833 514.75,181.333 645.25,348.833 "/> 
 
    <polyline class="st0" points="518.875,174.908 644.667,2.021 1139.833,1.52 1139.75,663.583 897.25,663.583 "/> 
 
    </svg>

같은 내 코드 SVG 태그 여러 개의 다각형으로 마우스를 가져 가면 텍스트를 추가 할 수 있습니까?

Here a fiddle what I have

나는 그 기본을 보여줍니다 나는이

처럼 어떤 조언이

이

Answer 1

요는

<title>Your text</title> 

태그 태그 <svg></svg> 내부 또는 <poligon></poligon>을 추가 할 수 있습니다 감사하겠습니다 원하는 가져 가면 텍스트가 담긴 툴팁.

업데이트 jsfiddle

출처 :

• https://developer.mozilla.org/en/docs/Web/SVG/Element/title

• Tooltips not showing when hovering over SVG polygons

.st0 { 
 
    fill: #0491B7; 
 
} 
 
.st1 { 
 
    fill: #0491B7; 
 
} 
 
.st1:hover { 
 
    fill: red; 
 
    opacity: 0.5; 
 
} 
 
.st0:hover { 
 
    fill: red; 
 
} 
 

 
text{ 
 
    display:none; 
 
    fill:#fff; 
 
    font-size:2em; 
 
    font-family:sans-serif; 
 
} 
 

 
text.sub-text{ 
 
    display:none; 
 
    fill:#fff; 
 
    font-size:0.8em; 
 
    font-family:sans-serif; 
 
} 
 

 
g:hover > text{ 
 
    display:block; 
 
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1139.833px" height="663.313px" viewBox="0 0 1139.833 663.313" style="enable-background:new 0 0 1139.833 663.313;" xml:space="preserve"> 
 
    
 
    <g> 
 
    <polygon class="st0" points="0,0.313 638,0.313 383,347.313 0,347.313 "> 
 
    <title>One</title> 
 
    </polygon> 
 
    <text x="10" y="40"> TITLE </text> 
 
    <text x="10" y="55" class="sub-text">Some Content</text> 
 
    </g> 
 

 
    <polygon class="st1" points="0,353.813 649,353.813 891.5,663.313 0,663.313 "> 
 
    <title>Two</title> 
 
    </polygon> 
 

 
    <polygon class="st0" points="392.5,347.313 514.75,179.813 645.25,347.313 "> 
 
    <title>Three</title> 
 
    </polygon> 
 

 
    <polyline class="st0" points="518.875,173.388 644.667,0.501 1139.833,0 1139.75,662.063 897.25,662.063"> 
 
    <title>Four</title> 
 
    </polyline> 
 
</svg>