SVG z konwersją elementów i obrazów do PNG Obraz nie powiodło się

Question

Próbuję ukryć svg wygenerowany za pomocą Raphael.js w obrazie PNG. Cóż, przekonwertowałem svg na obraz, gdy svg nie ma komponentu wzorca i obrazu. Z drugiej strony, kiedy dodaję te dwa komponenty do SVG, coś pójdzie nie tak i konwersja nie powiedzie się. Pełne skrzypce tohere. Nawet jeśli zapiszę wygenerowany plik SVG i otworzę w przeglądarce bez konwersji na obraz, obraz i tupot nie będą renderowane.

Fragment kodu jest:

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

Mam rozwiązać ten tutaj http://jsfiddle.net/fktGL/1/, najpierw musiałem zmienić atrybut svg z

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

do

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

as svg nie sprawdzał poprawności w usłudze walidacji W3C, a here to stackoverflow wyjaśniający, że zmiana jest wymagana.

Następnie musiałem dodać kilka limitów czasu, aby umożliwić prawidłowe renderowanie SVG. Rozumiem, że dzieje się tak dlatego, że obraz został narysowany na płótnie SVG &, ale oba wymagają trochę czasu na renderowanie obrazu. Moje rozwiązanie nie działa idealnie na wolniejszych urządzeniach (pomocne byłoby zwiększenie czasu oczekiwania), ale nie znam innego sposobu na obejście tego problemu (mile widziane komentarze/usprawnienia).

Oto ostateczna snipit

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