在Firefox的HTML画布中绘制调整大小的SVG图像_Firefox_Canvas_Svg

在Firefox的HTML画布中绘制调整大小的SVG图像

firefox canvas svg

在Firefox的HTML画布中绘制调整大小的SVG图像,firefox,canvas,svg,Firefox,Canvas,Svg,我想在HTML画布上绘制一个调整大小的SVG图像它在Chromium中运行良好，但在Firefox中不起作用。在Firefox中，图像是像素化的以下是SVG图像： <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

我想在HTML画布上绘制一个调整大小的SVG图像

它在Chromium中运行良好，但在Firefox中不起作用。在Firefox中，图像是像素化的

以下是SVG图像：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewbox="0 0 200 200">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Resized SVG in Canvas</title>
        <meta charset="utf-8"/>

        <script>
        window.addEventListener('load', function() {
            var canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d'),
                image = new Image();
            image.src = 'circle1.svg';
            image.height = 400;
            image.width = 400;

            image.addEventListener('load', function() {
                try {
                    context.drawImage(image, 0, 0, 400, 400);
                }
                catch(error) {
                    console.log(error);
                }
            }, false);
        }, false);
        </script>
    </head>
    <body>
        <canvas height="600" id="canvas" width="600"></canvas>
    </body>
</html>


调整画布中SVG的大小
addEventListener（'load'，function（））{
var canvas=document.getElementById（'canvas'），
context=canvas.getContext（'2d'），
图像=新图像（）；
image.src='circle1.svg'；
image.height=400；
image.width=400；
image.addEventListener（'load'，function（））{
试一试{
drawImage（图像，0,0,400,400）；
}
捕获（错误）{
console.log（错误）；
}
}，假）；
}，假）；

结果是：

我希望在Firefox中绘制调整大小的SVG图像而不使用像素化，就像在Chromium中一样

目前，我将

放在画布顶部，以获得无像素化的SVG图像，但速度相当慢，因为有很多图像。

我终于找到了在Firefox的画布上绘制调整大小的SVG的方法。我们的想法是通过AJAX获取SVG源代码，并通过JavaScript更改SVG，如下所示：

var transformTag;

transformTag = $(document.createElementNS('http://www.w3.org/2000/svg', 'g'))
    .attr('transform', 'scale(' + scaleX + ', ' + scaleY + ')');

svgElement.attr({
    'height': dh,
    'viewbox': '0 0 ' + dw + ' ' + dh,
    'width': dw
})
    .wrapInner(transformTag);

下面是一个示例（没有AJAX，但很容易更改）

由于修改和图像创建速度很慢，我添加了一个简单的缓存机制（虽然没有在小提琴中显示，但它很容易实现），速度非常快

它可以在Chromium、Firefox和Opera中使用（但由于某种原因，小提琴在Opera中不起作用，尽管它可以在我的开发服务器中使用）

备注：如果有jQuery替代

document.createElements

，我想知道。

您是否考虑过使用本机画布api:context.arc（x，y，radius，0，Math.PI*2，false）绘制圆？许多SVG基本图形也可以在画布中使用——甚至路径也相当容易转换。这只是一个示例。我想画更复杂的SVG图像。这是一个很好的问题，它表明Firefox的Gecko渲染引擎会立即将SVG转换为位图，而Webkit会将其保留为SVG，并在需要时直接渲染。这就解释了为什么即使绘制400像素宽的SVG，我的20000单位宽的SVG也无法在Firefox中呈现。它在webkit上运行得很好。这里是jQuery免费版本的第一步，以防有人寻找它：