인라인 svg-polygon 호버 툴팁

Question

모든 폴리곤에서 마우스를 가져 가면 어떤 이유로 동일한 제목 (텍스트 1)이 표시됩니다. 고유 한 제목이나 툴팁을 만드는 방법은 무엇입니까?

https://codepen.io/fka_dingo/pen/WXQrGe

<polygon class="st0" points="675.9,148.9 600.4,29 524.9,148.9" /> 
    <title>Text 1</title> 
    </polygon> 

    <polygon class="st1" points="438.6,283.6 759.5,283.6 688.5,171 509.6,171" /> 
    <title>Text 2</title> 
    </polygon> 

감사합니다!

Answer 1

다각형 태그가 잘못 닫혔습니다. 그것들은 그들을 닫는 />을 가지므로 제목 요소는 폴리곤 자식이 아닙니다. 아래의 다각형 요소에서 />를>로 바꿨습니다.

<svg viewBox="0 0 800 800"> 
 
<polygon class="st0" points="675.9,148.9 600.4,29 524.9,148.9"> 
 
    <title>Text 1</title> 
 
    </polygon> 
 

 
    <polygon class="st1" points="438.6,283.6 759.5,283.6 688.5,171 509.6,171"> 
 
    <title>Text 2</title> 
 
    </polygon> 
 
</svg>