2011-10-28 20 views
23

He visto varios hilos que abordan esta pregunta, pero nada que realmente resuelva mi problema. Tengo un archivo SVG con un mapa y regiones diferentes (http://www.mediafire.com/?5pmyevdwbyrb51f). Quiero hacer algo como esto: http://raphaeljs.com/australia.html.Raphael JS - Use un archivo SVG

Pero la pregunta es ¿cómo puedo convertir el archivo para que funcione en el script? ¿Cómo obtengo esas coordenadas? He intentado con varios convertidores y demás, pero debo aspirar a esto porque no puedo hacer que funcione. Tal vez alguien puede ayudar?

+0

posible duplicado de [archivos SVG en Raphael, ¿se pueden usar?] (Http://stackoverflow.com/questions/3135061/svg-files-in-raphael-can-they-be -used) –

Respuesta

2

mirar el código de:

http://raphaeljs.com/tiger.html

<script src="tiger.js"> 
// Load the file with the tiger mapping to a variable 
    var tiger = [0,0,600,600,{type:"path",path:"M-122.304 84.285C-12... 
</script> 

<script> 
// run it 
window.onload = function() { 
    var r = Raphael(tiger).translate(200, 200); 
}; 
</script> 
+0

No lo hago mira cómo eso me ayuda. Ese ejemplo no usa un archivo SVG? Explícame si estoy siendo estúpido ahora. El problema es obtener esas coordenadas (como las de tiger.js) de mi archivo. – larschanders

+1

https://github.com/crccheck/raphael-svg-import-classic – fmsf

+0

Con esta solución, tendría que AJAX en su archivo .svg como .txt y extraer los datos de ruta para proporcionar a Raphael. En realidad es una solución bastante decente – netpoetica

9

Si se refiere a el uso de Raphael para importar un archivo SVG para que pueda visualizarlo o manipularlo, no es compatible actualmente. Pero es posible que desee comprobar las extensiones raphael-svg-import o raphael-svg-import-classic.

Consulte también SVG files in Raphael, can they be used?

+0

Gracias por la respuesta. Ya los probé y no puedo conseguir que trabajen. Si alguien siente que quiere intentarlo, tengo el enlace a mi archivo en mi primera publicación. No sé lo que estoy haciendo mal. Intenté con diferentes "configuraciones" también en InkScape pero esta no es mi taza de té ... – larschanders

+0

También probé el convertidor [aquí] (https://github.com/wout/raphael-svg-import) pero necesita para anotar todo el contenido de su archivo svg y no aceptará el formato svg producido por inkscape. –

0

Adicionalmente a mikefrey's answer usando golpeador, un ejemplo:

var paper = Raphael(0, 0, 160, 600); 

var rappar = [...]; // here use the output from rappar 

var graphic = paper.set(); 
rappar.forEach(function (item) { 
    graphic.push(paper 
    .path(item.path) 
    .attr('fill', item.fill) 
    .attr('stroke', item.stroke) 
    // ... 
); 
}); 
graphic.transform('s0.8,0.8,0,0'); 
// ... 

Usando Raphael v2.2.6 y v0.0.2 rappar.