SVG mit Muster und Bildelementkonvertierung nach PNG Bild fehlgeschlagen

Question

Ich versuche Svg mit Raphael.js generiert in PNG-Bild zu konvertieren. Nun, ich habe die SVG in ein Bild umgewandelt, wenn SVG keine Muster- und Bildkomponente hat. Wenn ich dann diese beiden Komponenten in SVG einfüge, geht etwas schief und die Konvertierung schlägt fehl. Komplette Geige isthere. Selbst wenn ich das generierte svg speichere und im Browser öffne, ohne das Bild zu konvertieren, wird das Bild und das Muster nicht gerendert.

Der Code-Snippet ist:

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

Ich habe diese hier http://jsfiddle.net/fktGL/1/ gelöst, zuerst musste ich das Attribut svg ändern von

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

zu

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

als Die svg validierte den W3C-Validierungsservice nicht und here ist ein Stackoverflow, der erklärt, dass eine Änderung erforderlich ist.

Ich musste dann einige Timeouts hinzufügen, damit das SVG richtig rendern kann. Ich verstehe das, weil das Bild in der SVG & Canvas gezeichnet wurde, aber beide brauchen etwas Zeit, um das Bild zu rendern. Meine Lösung funktioniert nicht perfekt auf langsameren Geräten (eine Erhöhung der Timeouts würde helfen), aber ich kenne keine andere Möglichkeit, dies zu umgehen (willkommen Kommentare/Verbesserungen).

Hier ist der letzte 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);