SVG con conversione dell'elemento di modello e immagine in PNG Immagine non riuscita

Question

Sto cercando di convertire svg generato con Raphael.js nell'immagine PNG. Bene, ho convertito la svg in immagine quando svg non ha pattern e componente dell'immagine. Poi di nuovo quando aggiungo questi due componenti in SVG qualcosa va storto e la conversione fallisce. Il violino completo èhere. Anche se salgo lo svg generato e apro nel browser senza conversione nell'immagine, l'immagine e il patter non vengono renderizzati.

Il frammento di codice è:

var r = Raphael(document.getElementById("cus"), 390, 253); 
    r.setViewBox(-5, -2, 228, 306); 
    for (var outline in doorMatOutline) { 
     var path = r.path(doorMatOutline[outline].path); 
     //path.attr({fill: 'url('+patternuri+')'}); //adding pattern   
    } 
    //adding image 
    var img = r.image(imageuri, 5 ,10 ,100 ,100); 

    var svg = $('#cus').html().replace(/>\s+/g, ">").replace(/\s+</g, "<"); 

    canvg('cvs', svg, { 
     ignoreMouse: true, 
     ignoreAnimation: true 
    }); 

    var canvas = document.getElementById('cvs'); 
    var img = canvas.toDataURL("image/png"); 

    $("#resImg").attr('src', img); 
    $("#cus").hide(); 

Answer 1

Ho risolto questo qui http://jsfiddle.net/fktGL/1/, prima ho dovuto cambiare l'attributo SVG da

xmlns="http://www.w3.org/2000/svg"

a

xmlns:xlink="http://www.w3.org/1999/xlink" 

come lo svg non stava convalidando il servizio di validazione W3C e here è uno stackoverflow che spiega che è necessaria una modifica.

Ho quindi dovuto aggiungere alcuni timeout per consentire al rendering SVG correttamente. Capisco questo perché l'immagine è stata disegnata nella tela SVG &, ma entrambi hanno bisogno di tempo per il rendering dell'immagine. La mia soluzione non funziona perfettamente su dispositivi lenti (un aumento dei timeout sarebbe d'aiuto), ma non conosco un altro modo per aggirare questo problema (benvenuti eventuali commenti/miglioramenti).

Ecco la snipit finale

var r = Raphael(document.getElementById("cus"), 390, 253); 
r.setViewBox(-5, -2, 228, 306); 
for (var outline in doorMatOutline) { 
    var path = r.path(doorMatOutline[outline].path); 
    path.attr({ 
     fill: 'url(' + patternuri + ')' 
    }); 
} 

$('#cus svg').removeAttr('xmlns'); 

// If not IE 
if(/*@cc_on!@*/false){ 
    $('#cus svg').attr('xmlns:xlink',"http://www.w3.org/1999/xlink"); 
} 


// First timeout needed to render svg (I think) 
setTimeout(function(){ 
    var svg = $('#cus').html(); 
    window.svg = svg; 
    canvg(document.getElementById('cvs'), svg); 
    // annother delay required after canvg 
    setTimeout(function(){ 
     var canvas = document.getElementById('cvs'), 
      img = canvas.toDataURL("image/png"); 
     $("#resImg").attr('src', img); 
     //$("#cus").hide(); 
     console.log("ending... "); 
    },100) 
},100);