Modifica un file svg usando jQuery

Ho un file SVG con qualche forma e un po ‘di testo. Mi piacerebbe modificare lo svg in fase di runtime, in modo che alcune forms possano cambiare colore e alcuni testi possano cambiarne il contenuto.

Supponiamo di avere solo due elementi in un file svg esterno:

  1. circle1: un cerchio blu riempito con quell’ID

  2. text1: un testo contenente “-” con quell’id

Ora posso visualizzare il file nel mio html con

 

Da un pulsante vicino all’immagine, usando jQuery, posso prendere l’evento onClick: mi piacerebbe riempire il ciclo con il rosso e cambiare il testo in “ciao parola”.

Come lo posso fare? Esiste una soluzione basata su jQuery?

Ho trovato il plugin jquery.svg, ma sembra che tu possa solo modificare un documento creato in runtime.

Grazie.

Fatto!

Finalmente ho trovato la documentazione su jQuery.svg. e sullo stesso svg.

Iniziamo con il codice:

           
Click Me!

E questo esempio di file Red1.svg:

   Hello!  

Usando jQuery, ho caricato Red1.svg esterno in fase di runtime. Con un clic su btnTest ho impostato il testo e il colore di riempimento.

Nella mia ricerca ho trovato che:

  1. Con jQuery.svg posso accedere agli elementi nel file SVG e nel tag html standard
  2. SVG ti consente di scegliere il modo in cui desideri impostare il colore di riempimento

    2a. con uno stile

      rect.css('fill','green'); 

    2b. con un tag specifico

      rect.attr('fill','green'); 

Quindi il tuo codice deve cambiare a seconda del programma che ha generato lo svg.

Buona giornata.

Bene, c’è una libreria FANTASTICA che puoi usare con jQuery o qualsiasi altro javascript:

Raphael JS: http://raphaeljs.com/

Guarda i campioni, puoi fare praticamente qualsiasi cosa.

Io uso svgweb per visualizzare e manipolare a livello di codice SVG utilizzando JavaScript. Lo uso perché trasferisce SVG in IE6 + utilizzando Flash e poiché fornisce alcune funzionalità di caricamento SVG ottimali.

Dal momento che mi piace usare jQuery così tanto, l’ho patchato per funzionare con svgweb. Ho usato la sceneggiatura di Keith Woods come esempio. Il codice di Keith non supporta l’ultima versione di jQuery.

Ecco la patch: jquery.svgweb-and-svgdom-patch Ho cercato di dargli una casa adeguata nel contributo di svgweb, ma non ci sono riuscito. È basato sulla patch di Keith, ma ha alcuni aggiornamenti. Una cosa da sapere, è che per IE, dovrai inserire il seguente codice in uno script prima che carichi jQuery:

 document.querySelectorAll = null; 

Non è sufficiente farlo dopo il caricamento di jQuery, quindi dovresti utilizzare il rilevamento del browser sul lato server per iniettarlo o il rilevamento del browser sul lato client in uno script prima di jQuery.

Dopo tutto quello … Puoi fare cose come:

 $('#mycirc').attr('fill', 'Red'); 

http://irunmywebsite.com/raphael/additionalhelp.php?q=path Quanto sopra è solo un esempio interattivo sul mio sito Vorrei solo dire che ho trovato i cani Raphael accurati ma sono minimi, penso che l’autore incoraggi l’auto esplorare

Sto ipodding quindi scusa l’inglese rotto !!