Esistono strumenti online per testare i percorsi SVG?

Sto costruendo un'applicazione che utilizza SVG paths e mi piacerebbe poter vedere i miei percorsi renderizzati. C'è un sito, dì qualcosa come JSFiddle, sul quale puoi incollare un tracciato SVG, farlo convalidare e vederlo renderizzato?Esistono strumenti online per testare i percorsi SVG?

EDIT: Ho trovato che JSFiddle funziona abbastanza bene per questo, selezionando Raphael.js, svg.js, ecc. Come framework. per esempio. http://jsfiddle.net/DFhUF/1393/

var paper = Raphael(0, 0, 300, 500); 

paper.path("M75,75 m-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0") 
.attr({stroke: "#808", opacity: 1, "stroke-width" : 6}) 

paper.path("M75,225 m-40,-50 h80, a10,10 0 0,1 10,10 v80 a10,10 0 0,1 -10,10 h-80 a10,10 0 0,1 -10,-10 v-80 a10,10 0 0,1 10,-10") 
.attr({stroke: "#808", opacity: 1, "stroke-width" : 6})

che probabilmente è abbastanza buono per le mie esigenze, ma sarebbe bello sapere se ci sono altri strumenti per aiutare il debug di test e la modifica dei percorsi SVG.

fonte

2013-07-05 ericsoco

Basta aprire la .SVG nel tuo browser. O mi sta sfuggendo qualcosa? – andy256

non .svg file, percorsi SVG. come in: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths anche se questo è un modo per farlo, grazie. – ericsoco

Perché non inserire il tuo percorso in un elemento '' SVG e visualizzarlo nel browser o nel visualizzatore SVG di tua scelta? –

Se vuoi solo provare rapidamente alcuni SVG nel tuo browser e non scherzare con il salvataggio e il caricamento dei file, jsFiddle è una grande opzione.

Basta usare il codice seguente come modello:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <path d="your path data here"></path> 
</svg>

ho creato un sample to work from here.

jsFiddle supporta anche framework come D3, PaperJs e Raphael da un menu a discesa sul lato sinistro.

fonte

2013-11-26 12:14:37

Edit: l'aggiornamento non ha mostrato per qualche ragione, prima ho postato questo ...

incollare il percorso SVG in un file di testo con un nome Svg, e aprirlo in un browser. In alternativa, creare una piccola pagina come questa

<html> 
    <head><title>My SVG test page</title></head> 
    <body> 
    <h1>My SVG test</h1> 
    <object id="SVG" type="image/svg+xml" data="MySvgTest.svg" 
     width="1000" height="1500"/> 
    </body> 
</html>

e aprirlo in un browser (vedi the Primer). Si presuppone che il tuo SVG sia in MySvgTest.svg

fonte

2013-07-08 23:41:37 andy256

A pochi luoghi per testare e ottimizzare in diretta:

~~http://scriptdraw.com~~ non è più mantenuto.

fonte

2014-03-21 17:44:25 darcher

È possibile utilizzare il mio aiuto web-page http://naiksoftware.github.io/svg.html

fonte

2015-10-05 12:26:07

Descrivi come la pagina web di supporto potrebbe aiutare l'interrogante. Grazie. –

Rendering percorso svg –

Un miglioramento: quando le icone sono grandi, non si adatta allo spazio disponibile. Ne vedi solo l'angolo. – user2173353

Esistono strumenti online per testare i percorsi SVG?

risposta

Problemi correlati