Canvg-鼠標移動時的畫布更改

Question

我正在使用canvg以便將一些SVG渲染到圖像中。 目前，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上進行了驗證（我的朋友也驗證了在Windows下同時在Firefox和Chrome上發生這種情況）。

Answer 1

您必須使用ignoreMouse選項：

更新的小提琴： http : //jsfiddle.net/35t6fkvj/7/

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

不知道為什么它認為應該添加一些鼠標事件