2012-05-15 15 views
6

Tengo una aplicación que crea un mosaico svg básico que es aproximadamente 300 x 150px. Necesito duplicar este mosaico, de modo que pueda crear una buena impresión en dos páginas A4 o en una sola página A3. Entonces, básicamente, estoy haciendo el diseño de página 101, en svg en lugar de Photoshop/lo que sea.Creando y escalando SVG para salida de impresora

¿Alguien me puede dar alguna indicación sobre cómo comenzar esto? Por el momento, lo estoy haciendo muy ingenua:

  1. conjunto un gran lienzo, de alrededor de 1500 x 1500px
  2. duplicar la baldosa 4 x 6 veces en JavaScript
  3. de impresión desde el navegador

Esto es más o menos aceptable, pero no se ve bien. ¿Ayudaría configurar un lienzo con un tamaño físico de una página A4? Si hago esto, entonces tengo el problema de que el mosaico es un gráfico complejo que he creado actualmente usando unidades de píxeles. Incluso si hago esto, el navegador presumiblemente ignorará el tamaño del lienzo de todos modos. ¿O debería convertir a pdf primero? Si hago esto, aún tengo que encontrar la forma de configurar una 'página' svg que se convierta bien en pdf. ¿Y alguna herramienta realmente soporta las cosas de la página svg 1.2?

Tenga en cuenta que no puedo usar Inkscape, ya que mi código svg es completamente JavaScript.

+0

¿Puede dar algunas capturas de pantalla para mostrar la forma en que no se ve bien? Si puede proporcionar un jsfiddle que sería ideal, ya que las personas pueden tener una idea de lo que está pasando mal. Además, ¿cómo está convirtiendo de SVG a PDF? Presumiblemente, ¿estás haciendo eso en el servidor? – halfer

+0

Imagine un documento Word impreso en A4 en el que el texto de 10 pt sale como 14pt, el margen derecho está fuera de lugar, y en el que se han perdido los saltos de página, y usted está allí. No había intentado la conversión de PDF antes de publicarla, pero ahora probé wkhtmltopdf. Si configuro el lienzo como 297x210 mm y ejecuto wkhtmltopdf sin escala inteligente, y con márgenes cero, la salida se ajustará en una página A4, aunque no del todo centrada. El problema entonces es encontrar algo para configurar la vista que es lógica y que me permite diseñar en píxeles. Creo que tendré que renunciar a los píxeles y moverme a pts y cm. – EML

Respuesta

1

¡No utilice lienzo para esto!

El objetivo de SVG son los gráficos escalables. Puede escalar el SVG usted mismo en el navegador y luego imprimir desde allí.

Si desea escalar SVG entonces todo lo que tiene que hacer es o bien aplicar una escala de CSS:

http://jsfiddle.net/simonsarris/xYZyf/

O una escala SVG:

http://jsfiddle.net/simonsarris/xYZyf/1/

+0

La escala CSS no parece funcionar en navegadores basados ​​en webkit a partir de julio de 2014 –

Cuestiones relacionadas