Disegnare un file SVG su un canvas HTML5

Esiste un modo predefinito per disegnare un file SVG su una canvas HTML5? Google Chrome supporta il caricamento di SVG come immagine (e semplicemente usando drawImage ), ma la console di sviluppo avvisa che la resource interpreted as image but transferred with MIME type image/svg+xml .

So che sarebbe una possibilità convertire i comandi SVG in canvas (come in questa domanda ), ma spero che non sia necessario. Non mi importa dei browser più vecchi (quindi se FireFox 4 e IE 9 supporteranno qualcosa, questo è abbastanza buono).

EDIT 5 novembre 2014

Ora è ansible utilizzare ctx.drawImage per disegnare HTMLImageElements con origine .svg in alcuni ma non tutti i browser . Chrome, IE11 e Safari funzionano, Firefox funziona con alcuni bug (ma la notte li ha risolti).

 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"; 

Esempio dal vivo qui . Dovresti vedere un quadrato verde nella canvas. Il secondo quadrato verde sulla pagina è lo stesso elemento inserito nel DOM come riferimento.

Puoi anche utilizzare i nuovi oggetti Path2D per tracciare percorsi SVG (stringa) ( funziona solo in Chrome al momento ). In altre parole, puoi scrivere:

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

Esempio in diretta di questo qui.


Vecchia risposta dei posteri:

Non c’è nulla di nativo che ti permetta di usare in modo nativo i percorsi SVG nella canvas. Devi convertirti o usare una biblioteca per farlo per te.

Suggerirei di cercare in canvg:

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

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

Puoi facilmente disegnare svg s semplici su una canvas:

  1. Assegnare la sorgente dello svg ad un’immagine in formato base64
  2. Disegnare l’immagine su una canvas

Nota: l’unico metodo di ritiro del metodo è che non è ansible disegnare immagini incorporate nello svg . (vedi demo)

Dimostrazione:

(Si noti che l’immagine incorporata è visibile solo nello svg )

 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); 
 svg, img, canvas { display: block; } 
 SVG     

IMAGE

CANVAS

Spiacente, non ho abbastanza reputazione per commentare la risposta di @Matyas, ma se l’immagine dello svg è anch’essa in base64, sarà disegnata per l’output.

demo:

 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; 
 svg, img, canvas { display: block; } 
 SVG     

IMAGE

CANVAS

Mozilla ha un modo semplice per disegnare SVG su canvas chiamato ” Disegnare oggetti DOM in una canvas ”

Come dice Simon sopra, l’uso di drawImage non dovrebbe funzionare. Ma, usando la libreria canvg e:

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

Questo deriva dal link che Simon ha fornito in precedenza, che ha una serie di altri suggerimenti e indica che si desidera effettuare il collegamento o scaricare canvg.js e rgbcolor.js. Questi ti consentono di manipolare e caricare un SVG, tramite URL o utilizzando il codice SVG in linea tra tag svg, all’interno delle funzioni JavaScript.