Articles of svg

La linea SVG con tratto sfumato non viene visualizzata diritta

Sto tentando di replicare un con SVG. Ora, fare una linea dritta con SVG funziona perfettamente, ma nel secondo lo accarezzo con un gradiente che non verrà più visualizzato in linea retta. Il seguente codice funziona, ma prendi nota, y1 e y2 devono essere separati da 1 unità. Se imposto y1 e y2 su 210, […]

CSS: prima su SVG in linea

Aggiornare Grazie per aver segnalato la relazione tra il contenuto generato e gli elementi sostituiti. Ho trovato questo articolo che tratta proprio questo argomento: http://red-team-design.com/css-generated-content-replaced-elements/ È interessante notare che un documento del W3C intitolato “Modulo CSS3 generato e sostituito” (da 11 anni!) Definisce lo pseudo-elemento :outside , che potrebbe offrire una soluzione per utilizzare il […]

Interpolazione Catmull-Rom su percorsi SVG

Sto sperimentando la creazione di strumenti a matita ad alte prestazioni e di bell’aspetto usando i percorsi SVG. Sto registrando le coordinate del mouse per tracciare un percorso. Per ottenere un percorso ad alta fedeltà (accurato ai movimenti dell’utente) ho bisogno di registrare un punto per ogni movimento di pixel. Mantenere ogni punto del percorso […]

Esiste una sostituzione innerHTML in SVG / XML?

In HTML, posso creare un semplice sistema di template fornendo un template sotto forma di stringa, sostituendo alcune parti di esso e quindi assegnandolo tramite innerHTML ad un contenitore. var templ = ‘{myText}’ var newContent = templ.replace( ‘{myText}’, someVariable ); document.querySelector( ‘#myContainer’ ).innerHTML = newContent; In questo modo posso sfruttare il parser HTML del browser […]

JavaScript che accede al DOM interno di SVG

test.php è un object SVG che viene generato con PHP. var mySVG = document.getElementById(“SVG”); var svgDoc = mySVG.contentDocument; svgDoc è nullo. (e quindi non posso accedere agli elementi di svg via JS.) Dovrebbe funzionare, guardando questa domanda. Che cosa sto facendo di sbagliato? Come posso ottenere il contentDocument del mio SVG?

Perché d3.js v3 infrange il grafico della forza quando si implementa lo zoom quando v2 no?

Ho un layout di forza che ho creato usando d3.js Mi piacerebbe avere sia la normale funzionalità di un layout di forza trascinabile, sia la possibilità di zoomare. Ho praticamente copiato / incollato il codice dello zoom da questo codice ( http://jsfiddle.net/nrabinowitz/QMKm3/ ). Questo è lo stesso metodo di zoom che Mike Bostock utilizza in […]

Incorporamento di SVG in PDF (esportazione di file SVG in PDF utilizzando JS)

I punti di partenza: non ho un server in grado di fornire altro che file statici. E ho un elemento SVG (creato dynamicmente) nel mio che voglio esportare in un formato vettoriale, preferibilmente PDF o SVG. Ho iniziato a considerare l’utilizzo della lib jsPDF già esistente insieme a downloadify . Ha funzionato bene. Sfortunatamente, questo […]

Coordinate SVG con matrice di trasformazione

Voglio implementare la funzionalità come svg-edit sull’elemento rettangolo Ruota il rettangolo Ridimensionamento Trascinare Ruotando il rettangolo SVG funziona bene, ma quando voglio ridimensionare il rettangolo ha un problema. Le coordinate non funzionano correttamente; Io uso la matrice di trasformazione per ruotare targetelement.setAttribute(transform,rotate(45,cx,cy)) ma quando l’elemento è stato ruotato le coordinate vengono spostate. Sto anche usando […]

Come ridimensionare l’immagine SVG per riempire la finestra del browser?

Sembra che dovrebbe essere facile, ma non sto ottenendo qualcosa. Voglio creare una pagina HTML contenente una singola immagine SVG che si ridimensiona automaticamente per adattarsi alla finestra del browser, senza alcuno scorrimento e pur mantenendo le sue proporzioni. Ad esempio, al momento ho un’immagine SVG 1024×768; se la finestra del browser è 1980×1000, allora […]

Come disegnare un percorso vettoriale progressivamente? (Raphaël.js)

Come animare un tracciato vettoriale come se fosse disegnato, progressivamente? In altre parole, mostra lentamente il percorso pixel per pixel. Sto usando Raphaël.js , ma se la tua risposta non è specifica per una libreria, come forse c’è qualche schema generale di programmazione per fare quel genere di cose (sono abbastanza nuovo per l’animazione vettoriale) […]