Desen ve görüntü elemanı PNG'ye dönüştürme ile SVG Görüntü başarısız oldu

Question

Raphael.js ile oluşturulan svg'yi PNG görüntüsüne gizlemeye çalışıyorum. Peki, svg hiçbir desen ve görüntü bileşeni olmadığında svg görüntüye dönüştürdüm. Daha sonra bu iki bileşeni SVG'ye eklediğimde bir şeyler ters gidiyor ve dönüştürme başarısız oluyor. Komple keman,here. Oluşturulan svg'yi kaydetmem ve tarayıcıya görüntüyü dönüştürmeden açsam bile görüntü ve pafta işlenmez.

kod parçacığı geçerli:

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

Ben, bu burada http://jsfiddle.net/fktGL/1/ çözmüş ilk ben

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

için

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

gelen svg niteliğini değiştirmek zorunda

as svg, W3C doğrulama hizmetinde doğrulanmadı ve here, bir değişikliğin gerekli olduğunu açıklayan bir yığın ayırmadır.

Daha sonra SVG'nin düzgün bir şekilde oluşturulmasını sağlamak için bazı zaman aşımları eklemem gerekiyordu. Anladığım kadarıyla bu resim SVG & tuvalinde çizildi, ancak her ikisinin de görüntüyü oluşturmak için biraz zamana ihtiyacı var. Benim çözümüm, yavaş cihazlarda mükemmel çalışmaz (zaman aşımlarında bir artış yardımcı olacaktır), ama bunun üstesinden gelmek için başka bir yol bilmiyorum (herhangi bir yorum/geliştirmeyi memnuniyetle karşılıyoruz).

İşte son snipit png içinde kiremit gibi

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