Javascript Canvg-鼠标移动时的画布更改
我正在使用,以便将一些SVG渲染成图像。目前SVG到画布部分工作正常。但是,我无法确定当指针进入生成的画布时,它为什么会发生变化。我真的必须复制生成的画布,还是我遗漏了什么Javascript Canvg-鼠标移动时的画布更改,javascript,canvas,svg,html5-canvas,canvg,Javascript,Canvas,Svg,Html5 Canvas,Canvg,我正在使用,以便将一些SVG渲染成图像。目前SVG到画布部分工作正常。但是,我无法确定当指针进入生成的画布时,它为什么会发生变化。我真的必须复制生成的画布,还是我遗漏了什么 svgElement.each(function () { var canvas = document.createElement("canvas"); //convert SVG into a XML string var xml = (new XMLSerializer()).serializeT
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();
}
在MacOS X El Capitan下的Firefox DE 47和Chrome 49上进行了验证(我的朋友也验证了这是在Firefox和Chrome上的Windows下进行的)。您必须使用以下选项:
更新小提琴:
不知道为什么它认为应该添加一些鼠标事件
canvg(canvas, xml, {
ignoreDimensions: true,
scaleWidth: width,
scaleHeight: height,
ignoreMouse: true
});