パターンと画像要素からPNG画像への変換が失敗したSVG

Question

Raphael.jsで生成されたsvgをPNG画像に変換しようとしています。さて、svgにパターンと画像コンポーネントがない場合、svgを画像に変換しました。次に、これらの2つのコンポーネントをSVGに追加すると、何かがうまくいかず変換が失敗します。 完全なフィドルはhereです。生成されたsvgを保存してブラウザに開いても、イメージをイメージに変換せずに表示しても、レンダリングされません。

コードスニペットは、次のとおりです。

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:xlink="http://www.w3.org/1999/xlink" 

に

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

からSVG属性を変更しなければなりませんでした

としてsvgはW3C検証サービスで検証されておらず、hereは変更が必要であることを説明するスタックオーバーフローです。

その後、SVGを適切にレンダリングできるように、いくつかのタイムアウトを追加する必要がありました。イメージはSVG &キャンバスに描画されていますが、どちらもイメージのレンダリングに時間がかかるためです。私の解決策は、遅いデバイスでは完璧に機能しません（タイムアウトの増加は役に立ちます）。しかし、これを回避する別の方法はわかりません（コメント/改善を歓迎します）。ここで

はPNGタイルのような最終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);