Estoy construyendo una aplicación que utiliza Las rutas SVG, y me gustaría ser capaz de ver a mis caminos prestados. Hay un sitio, decir algo como JSFiddle, en el que se puede pegar en un SVG camino, consiguen que sea validado, y ve dibujado?

EDITAR: he encontrado que JSFiddle funciona bastante bien para esto, mediante la selección de Raphael.js, svg.js, etc como un 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})

Eso es probablemente 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 las Rutas SVG.

  • Sólo tiene que abrir el .SVG en su navegador. O me estoy perdiendo algo?
  • no .archivos svg, Rutas SVG. como en: developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths a pesar de que es una manera de hacerlo, gracias.
  • ¿Por qué no acaba de poner su camino en un SVG <path> elemento y ver en el navegador o en el visor SVG de su elección?
  • Tenga cuidado, el motor Webkit y Opera 12 ambos aceptan caminos que no son válidas de acuerdo a la especificación SVG.
  • Aunque el ceño, he de decir que esto era EXACTAMENTE lo que estaba buscando. Muchas gracias!
InformationsquelleAutor ericsoco | 2013-07-05

5 Comentarios

  1. 45

    Si sólo quieres probar rápidamente algunos SVG en su navegador y no meterse con el ahorro y la carga de archivos, jsFiddle es una gran opción.

    Sólo utilizar el código siguiente como una plantilla:

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

    He creado un ejemplo para trabajar desde aquí.

    jsFiddle también admite los marcos como D3, PaperJs y Rafael, a partir de un menú desplegable en el lado izquierdo.

    InformationsquelleAutor Drew Noakes
  3. 15

    Puede utilizar mi ayudador página web
    http://naiksoftware.github.io/svg.html
    Existen herramientas en línea para poner a prueba las rutas SVG?

    • Por favor, describa cómo el ayudante-página web podría ayudar a que el interrogador. Gracias.
    • Representación svg camino
    • Una de las mejoras: cuando los iconos son de gran tamaño no se ajusta al espacio disponible. Sólo se ve la esquina de la misma.
    InformationsquelleAutor Nickolay Savchenko
  4. 6

    He creado un sitio esta muy pupose: http://svghelper.com/
    Allí podrás pasado un SVG-ruta de acceso y jugar con él.
    Me parece muy útil ser capaz de ver todos los controlpoints etc! 🙂

    • Lamentablemente los errores de JS al menos en Firefox. Mientras que los ejemplos muestran la ruta de guías para la ruta de acceso de edición a través del ratón, una vez me pegue mi ruta de código se muestra bien, pero sin ninguna de las guías. Estoy un poco confundido sobre lo que esta herramienta se espera que haga. Problema? Error? La intención de rutas complejas?
    • Hola Kissanki, gracias por los comentarios. La herramienta no funciona en FF, lo sé. Como he dicho en la ayuda, hecha para uso personal, pero publicado por diversión. 🙂 Chrome funciona mejor en este caso. Trabajará en FF si tengo tiempo.
    • Esta herramienta fue perfecto para mí! Menor problema, he observado que tiene problemas para el análisis de coordenadas si hay coma entre los pares. Gracias por tomarse el tiempo para escribir y compartir esto!
    • Gran trabajo, gracias Pablo
    InformationsquelleAutor Paul Wiegers
  5. 1

    Edit: la actualización no se presentó, por alguna razón, antes he publicado esto …

    Pegar el archivo SVG ruta de acceso en un archivo de texto con una .svg nombre, y abrirlo en un navegador.
    Como alternativa, crear una pequeña página 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 abrirlo en un navegador (ver la Cartilla). Se supone que su SVG es en MySvgTest.svg

    InformationsquelleAutor andy256

Dejar respuesta

Please enter your comment!
Please enter your name here