Oggi ho realizzato un widget per visualizzare una struttura ad albero (costituita da rami e nodi) in puro CSS ed SVG, senza l’ausilio di JS.

Vi spiego brevemente quali strumenti ho utilizzato:

• LESS, utile per parametrizzare la “latitudine” dei rami dell’albero, tramite la funzione accoda-loop() che posiziona i link-rami uno sotto l’altro sino ad un massimo di 50 items.
• SVG, ho utilizzato un path svg per disegnare la “curva” che lega due nodi diversi, che segue la seguente serie di punti

  M0,0 C50,0 50,100 100,100

• I link sono posizionati in maniera assoluta (position:absolute) rispetto ad ogni nodo in modo da facitare il riuso del nodo all’interno della struttura ricorsiva.
• Sull’HOVER vengono visualizzati dei tooltip su ogni link e viene azionata un’animazione dello “stroke-array”.