Hay un defecto de forma de llamar a un archivo SVG en un canvas de HTML5? Google Chrome es compatible con la carga de la SVG como una imagen (y simplemente usando drawImage), pero la consola para desarrolladores advierten que resource interpreted as image but transferred with MIME type image/svg+xml.

Sé que una posibilidad sería convertir SVG a la lona comandos (como en esta pregunta), pero tengo la esperanza de que no se necesita. No me importan los navegadores más antiguos (por lo que si FireFox 4 e internet explorer 9 apoyará algo, que ya es suficiente).

InformationsquelleAutor Randy Voet | 2010-09-22

5 Comentarios

  1. 94

    De EDICIÓN 5 de noviembre de 2014

    Ahora puede utilizar ctx.drawImage para dibujar HTMLImageElements que tienen una .svg fuente en algunos pero no todos los navegadores. Chrome, IE11, y Safari de trabajo, Firefox funciona con algunos errores (pero la noche ha fijado en ellos).

    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    }
    img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

    Ejemplo en vivo aquí. Usted debe ver a un cuadrado verde en el lienzo. El segundo cuadrado verde en la página es el mismo <svg> elemento insertado en el DOM para referencia.

    También puede utilizar la nueva Path2D objetos a dibujar SVG (cadena) caminos (sólo funciona en Chrome ahora). En otras palabras, se puede escribir:

    var path = new Path2D('M 100,100 h 50 v 50 h 50');
    ctx.stroke(path);

    Un vivo ejemplo de que aquí.


    De edad posteridad respuesta:

    No hay nada nativa que permite de forma nativa usar SVG caminos en canvas. Debe convertir usted mismo o utilizar una biblioteca para hacerlo para usted.

    Te sugiero buscar en canvg:

    http://code.google.com/p/canvg/

    http://canvg.googlecode.com/svn/trunk/examples/index.htm

    • ¿Por qué es esto necesario? SVG parecen dibujar a la perfección en un canvase con sólo drawImage. Pero todavía tengo esa advertencia. ¿De dónde provienen?
    • Simon, lo que usted está diciendo no es correcto. Y en segundo lugar, es un error confirmado en Chrome.
    • ctx.drawImage parece funcionar con los últimos Safaris demasiado.
    • Gracias, actualizado con el Safari y FF estado
    • Wikimedia no le gusta a usted el uso de la SVG, parece. Cambié en snapsvg.io/assets/images/logo.svg como la primera SVG he encontrado. Trabajó en FF. jsfiddle.net/Na6X5/331
    • como por su ejemplo de cómo un gran svg ajuste en las pequeñas pantallas jsfiddle.net/nikhilvkd/Fur2d/365
    • También puede usar Datos URI con el fin de hacer esto: jsfiddle.net/020k543w
    • Nota: debido a un pie de largo Bug de FireFox, tristemente, svgs que carecen de la altura y la anchura de las etiquetas no representar a todos en el lienzo. También, la anchura y la altura no debe ser en porcentajes.
    • de espera para el evento load es tan molesto cuando se necesita que la imagen de forma sincrónica 🙁

  2. 20

    Puede dibujar fácilmente simple svgs en un lienzo por:

    1. La asignación de la fuente de la svg para una imagen en formato base64
    2. De dibujo de la imagen en un lienzo

    Nota: La única backdraw del método es que no puede dibujar imágenes incrustadas en el svg. (ver demo)

    Demostración:

    (Tenga en cuenta que la imagen incrustada sólo es visible en el svg)

    JS:

    var svg = document.querySelector('svg');
    var img = document.querySelector('img');
    var canvas = document.querySelector('canvas');
    
    //get svg data
    var xml = new XMLSerializer().serializeToString(svg);
    
    //make it base64
    var svg64 = btoa(xml);
    var b64Start = 'data:image/svg+xml;base64,';
    
    //prepend a "header"
    var image64 = b64Start + svg64;
    
    //set it as the source of the img element
    img.src = image64;
    
    //draw the image onto the canvas
    canvas.getContext('2d').drawImage(img, 0, 0);

    CSS:

    svg, img, canvas {
      display: block;
    }

    HTML:

    SVG
    
    <svg height="40">
      <rect width="40" height="40" style="fill:rgb(255,0,255);" />
      <image xlink:href="https://en.gravatar.com/userimage/16084558/1a38852cf33713b48da096c8dc72c338.png?size=20" height="20px" width="20px" x="10" y="10"></image>
    </svg>
    <hr/><br/>
    
    IMAGE
    <img/>
    <hr/><br/>
       
    CANVAS
    <canvas></canvas>
    <hr/><br/>

    • Hay alguna manera de solucionar el problema que usted ha mencionado. Imagen incrustada en svg.
    • Lo siento, pero no he encontrado una solución a la imagen incrustada problema.
    • Bien. Gracias Matyas 🙂
  3. 18

    Lo siento, no tengo la suficiente reputación para comentar sobre el @Matyas respuesta, pero si el svg de la imagen también está en base64, va a ser dibujada a la salida.

    Demo:

    JS:

    var svg = document.querySelector('svg');
    var img = document.querySelector('img');
    var canvas = document.querySelector('canvas');
    
    //get svg data
    var xml = new XMLSerializer().serializeToString(svg);
    
    //make it base64
    var svg64 = btoa(xml);
    var b64Start = 'data:image/svg+xml;base64,';
    
    //prepend a "header"
    var image64 = b64Start + svg64;
    
    //set it as the source of the img element
    img.onload = function() {
        //draw the image onto the canvas
        canvas.getContext('2d').drawImage(img, 0, 0);
    }
    img.src = image64;

    CSS:

    svg, img, canvas {
      display: block;
    }

    HTML:

    SVG
    
    <svg height="40">
      <rect width="40" height="40" style="fill:rgb(255,0,255);" />
      <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/+/CfZ+XUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC" height="20px" width="20px" x="10" y="10"></image>
    </svg>
    <hr/><br/>
    
    IMAGE
    <img/>
    <hr/><br/>
       
    CANVAS
    <canvas></canvas>
    <hr/><br/>

    • Lo mismo con las fuentes, que necesitan para ser integrado en el SVG: jsfiddle.net/ykx7kp8L/121
    • usted podría ser capaz de recorrer el img etiquetas en el svg, y dibujar imágenes en el lienzo por separado posteriormente.
  4. 5

    Simón dice anteriormente, el uso de drawImage no debe trabajar. Pero mediante el uso de canvg biblioteca y:

    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');
    ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

    Esto viene desde el enlace de Simón de arriba, que tiene un número de otras sugerencias y puntos de salida que desea enlazar o descargar canvg.js y rgbcolor.js. Estos permiten manipular y cargar un SVG, ya sea a través de la URL o el uso en línea SVG código entre svg etiquetas, dentro de las funciones de JavaScript.

Dejar respuesta

Please enter your comment!
Please enter your name here