Hay una buena biblioteca para convertir SVG a HTML canvas que soporta el elemento font? Ya he probado canvg, pero no es compatible con la Fuente.

InformationsquelleAutor Seeker | 2011-03-31

3 Comentarios

  1. 30

    Los navegadores que soportan HTML5 Canvas también soporte SVG bastante bien a sí mismos. Como tal, usted podría 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 lona será contaminado; usted no será capaz de utilizar getImageData() para leer el resultado SVG, si esa es tu meta.

    He puesto un ejemplo de esta técnica en mi servidor: http://phrogz.net/tmp/canvas_from_svg.html

    He probado esta y comprobado que funciona (y se ve) en IE9, Chrome v11b, Safari v5, y Firefox v4.

    [Editar] tenga en cuenta que:

    1. Chrome y Firefox actualmente ‘batea’ en la seguridad y no permitir la lectura de la tela (por ejemplo, getImageData() o toDataURL()) después de dibujar cualquier SVG a la lona (con independencia del dominio) estos han sido corregidos

    2. Firefox tiene actualmente un error que se niega a dibujar SVG a la lona a menos que el SVG ha height y width atributos especificados.

    • Esto no funciona en firefox
    • Qué sistema operativo y versión de FireFox? A mí me funciona mediante FF4.0 en Windows 7.
    • Tengo un svg como una cadena en javascript. Yo lo uso como img.src = "data:image/svg+xml,"+svgString; funciona en chrome, firefox pero se niega a analizar svgString variable, como he de estilo incrustada con CDATA. Actualización: solucionado con encodeURIComponent(svgString)
    • esta solución no incluye una fuente! Se puede añadir un poco de texto en una fuente como Arial ( nada pero un serif Veces ) y ver si todavía se hace correctamente?
    • Es lo que hace. Usted puede hacer la prueba y ver por sí mismo. (Si usted necesita ayuda con la configuración de la fuente y el dibujo que quieres .font = "…" y .fillText(). Aquí hay un tutorial.)
    • ok veo la diferencia – gracias – pero si el original SVG tiene una fuente especial de la cara y de la que desea copiar el archivo SVG, incluyendo la cara de la fuente a la lona por serializar el SVG, fuente de la que en realidad no se muestran si usted usa .fuente en el lienzo y he aquí por qué graphicdesign.stackexchange.com/questions/5162/… – tu solución es buena, pero puede que no funcione en todos los casos, dependiendo de cómo el SVG se convierte
    • href=»https://jsfiddle.net/ykx7kp8L/121/» >jsfiddle.net/ykx7kp8L/121
    • bueno!
    • No funciona en IE11.

  2. 12

    En caso de que usted tiene el svg incrustado en HTML o como una fuente de crudo puede utilizar una URL de datos para convertir svg a un HTML elemento de imagen que 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 complejo de contenido SVG, usted puede ejecutar en las limitaciones de tamaño de datos: Uri-en mi caso esto significaba que no tenía otras opciones de uso de canvg para dibujar un complejo SVG.
  3. 1

    Yo sólo trató de una simple etiqueta img, Phrogs’ método y canvg. Mi SVG tiene incrustado PNG. Que sólo trabajó en canvg. Los otros mostraron la imagen, sin incrustado PNG. Que estaba en Android Jellybean, ya sea con el navegador estándar o Chrome.

Dejar respuesta

Please enter your comment!
Please enter your name here