1

一部の SVG を画像にレンダリングするためにcanvgを使用しています。現在、SVG からキャンバスへの部分は正常に機能しています。ただし、ポインタがキャンバスに入ったときに生成されたキャンバスが変更される理由を特定できません。生成されたキャンバスを本当にコピーする必要がありますか、それとも何か不足していますか?

svgElement.each(function () {
    var canvas = document.createElement("canvas");
    //convert SVG into a XML string
    var xml = (new XMLSerializer()).serializeToString(this);
    // Removing the name space as IE throws an error
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
    // Rounded svg dimensions
    var width = Math.floor(svgElement.width());
    var height = Math.floor(svgElement.height());
    // Draw the SVG onto a canvas
    canvas.width = width;
    canvas.height = height;
    $(canvas).css('border', '2px solid red');
    canvg(canvas, xml, {
        ignoreDimensions: true,
        scaleWidth: width,
        scaleHeight: height
    });
    $('body').append(canvas); // When pointer enters the canvas it changes
    // I can copy the canvas and that copy won't change on pointer enter.
    $(this).hide();
}

jsfiddle

MacOS X El Capitan の Firefox DE 47 および Chrome 49 で検証済みです (また、私の友人は、これが Firefox と Chrome の両方の Windows で発生していることを検証しました)。

4

1 に答える 1

2

オプションを使用する必要がありignoreMouseます：

更新されたフィドル: http://jsfiddle.net/35t6fkvj/7/ 

canvg(canvas, xml, {
    ignoreDimensions: true,
    scaleWidth: width,
    scaleHeight: height,
    ignoreMouse: true
});

ただし、いくつかのマウスイベントを追加する必要があると考える理由はわかりません

于 2016-04-06T12:17:50.680 に答える