¿Existe una buena biblioteca para convertir SVG en lienzo HTML que admita el elemento de fuente? Ya he intentado canvg, pero no es compatible con Font.Dibujar SVG en HTML5 Lienzo con soporte para el elemento de fuente
Los navegadores compatibles con HTML5 Canvas también son compatibles con SVG. Como tal, usted puede hacer esto:
var img = new Image;
img.onload = function(){ myCanvasContext.drawImage(img,0,0); };
img.src = "foo.svg";
La única desventaja de esta técnica es que si el SVG está fuera de su dominio de la tela se manchará; no podrá usar getImageData() para leer el SVG resultante, si ese es su objetivo.
He puesto un ejemplo de esta técnica en mi servidor: http://phrogz.net/tmp/canvas_from_svg.html
He probado esto y comprobado que funciona (y tiene el mismo aspecto) en IE9, Chrome v11b, Safari v5 y v4 Firefox.
[Editar] Tenga en cuenta que:
Chrome y Firefox actualmente 'Punt' en la seguridad y no permitir la lectura de la tela (por ejemplo
these have been fixedgetImageData() o
toDataURL()) después de dibujar
cualquier SVG el lienzo (independientemente del dominio)
Firefox actualmente tiene un error RCEst e se niega a dibujar SVG en el lienzo a menos que el SVG tenga los atributos height y width especificados.
En caso de tener el SVG embebido en páginas HTML o como fuente cruda puede utilizar una URL de datos para convertir el SVG a un elemento de imagen HTML que luego se puede dibujar en el lienzo:
var img = new Image();
// here attach an onload handler that draws the image on the canvas
// svgSource is the raw svg xml
img.src = "data:image/svg+xml," + encodeURIComponent(svgSource);
Tenga en cuenta que con el contenido SVG complejo, puede encontrarse con limitaciones de tamaño para los datos: URI: en mi caso esto significaba que no tenía otras opciones aparte de usar canvg para dibujar un complejo SVG. –
Acabo de probar una simple etiqueta img, el método de Phrogs y canvg. Mi SVG tiene un PNG incrustado. Eso solo funcionó en canvg. Los otros mostraron la imagen sin el PNG incrustado. Eso fue en Android Jellybean con el navegador estándar o Chrome.
Esto no funciona en firefox – Nilesh
@Nilesh ¿Qué sistema operativo y versión de FireFox? Funciona para mí usando FF4.0 en Windows 7. – Phrogz
Tengo un svg como una cadena en javascript. Lo uso como 'img.src =" datos: image/svg + xml, "+ svgString;' Funciona en chrome, pero firefox se niega a analizar la variable 'svgString', ya que he incrustado estilo con CDATA. Actualización: resuelto con encodeURIComponent (svgString) – arunkjn