debugging - google - tag manager account

¿Hay alguna herramienta en línea para probar las rutas SVG? (5)

Estoy construyendo una aplicación que utiliza rutas SVG , y me gustaría poder ver mis rutas renderizadas. ¿Hay algún sitio, digamos algo así como JSFiddle , en el que pueda pegar en una ruta SVG, validarla y verla renderizada?

EDIT : he descubierto que JSFiddle funciona bastante bien para esto, seleccionando Raphael.js, svg.js, etc. como marco. por ejemplo, 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})

Probablemente sea lo suficientemente bueno para mis necesidades, pero sería bueno saber si hay otras herramientas para ayudar a probar y depurar la edición de SVG Paths.

Algunos lugares para probar y modificar en vivo:

~~http://scriptdraw.com~~ ya no se mantiene.

Editar: su actualización no se mostró por alguna razón antes de publicar esto ...

Pegue su ruta SVG en un archivo de texto con un nombre .svg y ábralo en un navegador. Alternativamente, crea una página pequeña como esta

<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>

y ábrelo en un navegador (mira el Manual ). Asume que tu SVG está en MySvgTest.svg

He creado un sitio para este mismo sitio: http://svghelper.com/ Allí puedes pasar un SVG-path y jugar con él. ¡Me resulta muy útil poder ver todos los puntos de control, etc.! :-)

Puede usar mi página web de ayudante http://naiksoftware.github.io/svg.html

Si solo quieres probar rápidamente algunos SVG en tu navegador y no perder el tiempo guardando y cargando archivos, jsFiddle es una excelente opción.

Simplemente use el siguiente código como plantilla:

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

Creé una muestra para trabajar desde aquí .

jsFiddle también admite marcos como D3, PaperJs y Raphael en un menú desplegable en el lado izquierdo.