पीएनजी छवि में पैटर्न और छवि तत्व रूपांतरण के साथ एसवीजी असफल

Question

मैं पीपीजी छवि में Raphael.js के साथ उत्पन्न svg को गुप्त करने की कोशिश कर रहा हूं। खैर, मैंने svg को छवि में परिवर्तित किया जब svg में कोई पैटर्न और छवि घटक नहीं था। फिर फिर जब मैं इन दो घटक को एसवीजी में जोड़ता हूं तो कुछ गलत हो जाता है और रूपांतरण विफल हो जाता है। पूर्ण पहेलीhere है। यहां तक ​​कि अगर मैं उत्पन्न एसवीजी को सहेजता हूं और छवि में रूपांतरण के बिना ब्राउजर में खुलता हूं तो छवि और पटर प्रस्तुत नहीं किया जाता है।

कोड स्निपेट है:

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

मैं इस यहाँ http://jsfiddle.net/fktGL/1/ समाधान कर लिया है, पहले मैं से

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

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

को svg विशेषता बदलना पड़ा

के रूप में एसवीजी डब्ल्यू 3 सी सत्यापन सेवा पर मान्य नहीं था और here एक स्टैक ओवरफ्लो है जो बताता है कि एक बदलाव की आवश्यकता है।

मुझे एसवीजी को सही तरीके से प्रस्तुत करने की अनुमति देने के लिए कुछ समय-समय जोड़ना पड़ा। मैं समझता हूं क्योंकि यह छवि एसवीजी & कैनवास में खींची गई है लेकिन दोनों को छवि प्रस्तुत करने के लिए कुछ समय चाहिए। मेरा समाधान मैं धीमे उपकरणों पर पूरी तरह से काम नहीं करता (टाइमआउट में वृद्धि मदद करेगा), लेकिन मुझे इस बारे में जानने के लिए एक और तरीका नहीं पता (किसी भी टिप्पणी/सुधार का स्वागत है)।

यहाँ अंतिम 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);