Aggiunta della descrizione comando al tag rect SVG

Question

Qual è la migliore soluzione per aggiungere il suggerimento a <rect>?

Ho creato la mappa SVG con diversi tag <rect> e vorrei mostrare il suggerimento sul mouseover. Usare l'attributo title va bene, ma c'è qualche opzione su come ridistribuirlo usando CSS/Javascript/jQuery o c'è ancora l'opzione migliore per aggiungere un suggerimento?

<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve"> 
    <g> 
     <rect id="1" title="There's some text" x="0" y="0" fill="#666666" width="20" height="20"/> 
     <rect id="2" title="There's another text" x="30" y="0" fill="#666666" width="20" height="20"/> 
    </g> 
</svg> 

Answer 1

SVG utilizza elementi titolo, non attributi, è non si può stile loro però. Se hai bisogno di uno stile, devi creare il titolo dinamicamente come elemento <text> e posizionarlo nella posizione corretta usando javascript.

Questo è ciò che le descrizioni dei comandi di default sembrano ...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve"> 
 
    <g> 
 
     <rect id="1" fill="#666666" width="20" height="20"> 
 
      <title>There's some text</title> 
 
     </rect> 
 
     <rect id="2" x="30" fill="#666666" width="20" height="20"> 
 
      <title>There's another text</title> 
 
     </rect> 
 
    </g> 
 
</svg>