2012-05-06 11 views
15

estoy usando FabricJS y me surge algún problema con la pantalla de mi SVG en el lienzo:Problema con pantalla SVG/renderizado en Fabric.js

  • el resultado se muestra fuera de la caja de selección de fabricJS (debido a una traducción?)
  • los anclajes de la selección desaparecen después de una transformación y luego es imposible encontrarlos de nuevo.

Aquí está una captura de pantalla: enter image description here

estoy usando un SVG salida del Potrace y yo creo que es el origen de mi problema.
Aquí está el código del SVG: SVG code in pastebin
Puede probarlo con FabricJS en esta página: FabricJS Kitchensing example.
Simplemente pegue el código del SVG en el área "Cargar SVG", luego cambie el tamaño y gire el cuadro de sección para mostrar el SVG.

¿Conoces la parte de mi código SVG o la parte del código fabricjS que causa el problema? Si es así, ¿puedo cambiarlo fácilmente por mi cuenta? Si no, ¿es posible que alguien corrija o localice el posible error?

Muchas gracias por su ayuda.

EDIT: aparentemente, FabricJS no le gusta esta línea de la SVG:

<g transform="translate(0,648) scale(0.098780,-0.098780)" fill="#000000" stroke="none"> 

y más especialmente los traducen y atributos escala ... ¿Cómo solucionarlo?

EDIT2: la solución sería que la traducción y la escala son respectivamente igual a (0,0) y (1,1) o, mejor, que se aplican a las coordenadas.

¿Alguien tiene una idea para hacer eso con la secuencia de comandos Potrace o JS?

+2

Encontré la solución gracias al optimizador SVG de Peter Collingridge: http://petercollingridge.appspot.com/ ¡Aplica todas las transformadas g de un archivo SVG! – Zorkzyd

+2

si encontraste una solución, puedes convertir esto en una pregunta auto-respondida. –

+0

@Zorkzyd, los pls responden, también me enfrento al mismo problema al que se enfrenta ... ¿Puedo ayudarlo a salir de este problema? – kuldipem

Respuesta

4

2 años después, fabricJs ahora puede analizar y gestionar completamente este SVG. Simplemente pegue el viejo código SVG pasteBin en la demostración de kitchenSink y verá que se carga bien.

Ha habido muchas mejoras recientemente en el área de análisis de SVG. Sé que esto no es una respuesta como esperaría el usuario de stackoverflow, pero es mejor saber que pensar que esto todavía puede ser un problema.

Cuestiones relacionadas