Canvg - Leinwand ändert sich bei Mausbewegung

Question

Ich verwende canvg, um einige SVG in ein Bild zu rendern. Momentan funktioniert SVG to Canvas gut. Ich kann jedoch nicht feststellen, warum sich der erzeugte Canvas ändert, wenn ein Zeiger darauf trifft. Muss ich wirklich die generierte Leinwand kopieren, oder fehlt mir etwas?

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

Bestätigte auf Firefox DE 47 und Chrome 49 unter MacOS X El Capitan (auch überprüft mein Freund, dass dies auf Firefox und Chrome unter Windows geschieht).

Answer 1

Sie haben die ignoreMouse Option verwenden:

aktualisiert Geige: http://jsfiddle.net/35t6fkvj/7/

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

nicht sicher, warum er denkt, sollte es einige Mausereignisse obwohl

hinzufügen