Linee curve che utilizzano solo HTML e/o CSS

Question

Ho bisogno di aggiungere linee curve che collegano nodi di un diagramma in HTML. Voglio crearli usando solo HTML e/o CSS. Sto bene con CSS3 anche se non tutti i browser supportano la funzione di cui ho bisogno (in particolare non mi interessa molto di IE8 e di seguito). Qui ci sono soluzioni potrei usare con ragioni contro di loro:

• tela o svg - non piace perché ho a che fare poi con differenze tra i browser e non sono sicuro di prestazioni quando ho centinaia, forse migliaia, di questi oggetti galleggianti tra le mie belle nodi
• immagine - avrei bisogno di un numero ridicolo di immagini a che fare con tutte le possibili linee curve e un'immagine non scala bene a tutti quando lo zoom in e out
• div con un bordo-raggio css e un altro div che copre la parte della l ines non vogliamo - non preoccupatevi di IE8 e di seguito che non supportano questo, ma questo è un brutto trucco in cui non posso avere le linee curve risultanti su qualcosa come uno sfondo o altre linee che si sovrappongono. Posso?

Quali opzioni sono mancante? È possibile avere un div con un raggio di confine che è visibile solo per 1 angolo (e funziona su tutti i browser eccetto IE8 e sotto)?

Answer 1

Probabilmente si sta usando canvas, poiché la tela è progettata per disegnare roba. Le prestazioni dell'utilizzo di canvas dovrebbero essere migliori rispetto all'utilizzo di elementi DOM, in particolare con le versioni più recenti che utilizzano l'accelerazione GPU per il disegno.

Ad ogni modo, è sempre possibile utilizzare border-radius combinato con border-width o border-color per creare curve mostrando solo una parte del confine di elemento, nascondendo tutti gli altri:

#curves.width div { 
    border-color: transparent transparent transparent #999; 
} 

#curves.color div { 
    border-width: 0 0 0 1px; 
} 

Combinando questo con diverse combinazioni di border-radius, e ti sei fatto delle curve. Ho creato una demo molto semplice per questo qui: http://www.jsfiddle.net/yijiang/nDxYJ/

Puoi anche combinarlo con rotazione e trasformazione di CSS3 transform per una maggiore flessibilità. Tuttavia, è ancora più restrittivo rispetto all'utilizzo di canvas e anche più difficile da controllare.

Answer 2

Penso che per centinaia, anche fino a migliaia di oggetti, le prestazioni SVG non saranno poi così male, certamente non peggiori di qualsiasi altro modo in cui potreste avvicinarvi. Il problema principale delle prestazioni sarebbe in IE, in cui dovresti utilizzare un metodo per tornare a VML o Flash e dici che non sei troppo preoccupato del supporto per IE8.

È possibile disegnare tutte le linee in a single path e avere un solo oggetto da gestire, a condizione che non si aggiungano e rimuovano le righe tutto il tempo. Tutte le linee in un percorso dovrebbero essere dello stesso colore, quindi avrai bisogno di tanti percorsi quanti sono i colori delle linee.