インラインsvg-ポリゴンホバーツールチップ

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

ポリゴンタグが正しく閉じられていません。それらには/>が付いているので、title要素はポリゴンの子要素ではありません。私は以下のポリゴン要素の/>を>に置き換えました。

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