Come si esegue il rendering di una porzione di un file SVG nella tela?

Question

Nucleo Problema:

L'obiettivo è quello di rendere una porzione di uno SVG ad un elemento Canvas dimensione fissa su una pagina web.

mio tentata soluzione:

Visto che CanVG sembra essere il modo più straight-forward per il rendering di un'immagine SVG in Canvas ho pensato che avrei potuto sfruttare l'attributo viewBox per ritagliare l'immagine prima del rendering di CanVG. Ho avuto problemi su questo punto.

la domanda:

fornito un'immagine SVG, come si può rendere una parte di quella immagine ad un elemento Canvas?

Answer 1

Quale è esattamente il problema che si ottiene? La funzione context.drawImage ha una bella funzione di ritaglio incorporata. Invece dei 3 parametri standard (oggetto immagine, posizione x, posizione y) basta passare ad esso 9 parametri e ritaglia l'immagine. Questi sono i parametri:

context.drawImage(
imageObject, 
original image x crop position, 
original image y crop position, 
original image crop width, 
original image crop height, 
canvas image x crop position, 
canvas image y crop position, 
canvas image crop width, 
canvas image crop height 
) 

Non ho idea se questo funziona con CanVG ma, fino a quando è possibile passare un oggetto immagine alla funzione drawImage(), si sarà in grado di ritagliare come indicato nel codice.

Answer 2

1. Creare una tela fuori schermo e rendere ad esso utilizzando CanVG:

   var full = document.createElement('canvas'); 
   full.width=800; full.height=600; 
   canvg(full, '<svg>…</svg>'); 
   

2. copia una porzione di questo-come-immagine di tela ad una regione su un'altra tela utilizzando drawImage (vedi link per i dettagli dei parametri):

   var ctx = myVisibleCanvas.getContext('2d'); 
   ctx.drawImage(full,10,20,80,60,92,16,80,60); 
   

Modifica: Tuttavia, quanto sopra non è necessario se si ha accesso alla sorgente SVG (direttamente in JS o tramite una richiesta XMLHTTP) e si può modificare l'attributo viewBox prima del rendering. Vedere this demo che mostra un file SVG eseguito direttamente su una tela, quindi modifica l'attributo viewBox e esegue il rendering della regione ritagliata su un'altra area di disegno.