8

Raphael.js で生成された svg を PNG イメージに変換しようとしています。さて、svgにパターンと画像コンポーネントがない場合、svgを画像に変換しました。次に、これら 2 つのコンポーネントを SVG に追加すると、何か問題が発生し、変換が失敗します。完全なフィドルは こちらです。生成された 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();
4

1 に答える 1

4

ここでこれを解決しましたhttp://jsfiddle.net/fktGL/1/、最初にsvg属性をから変更する必要がありました

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

に

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

svg は W3C 検証サービスで検証されていなかったため、変更が必要であることを説明するスタックオーバーフローを次に示します。

次に、SVG が適切にレンダリングされるように、いくつかのタイムアウトを追加する必要がありました。これは、画像が 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 + ')'
    });
}

$('#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);
于 2013-05-24T13:34:51.450 に答える