Question

我想将调整大小的SVG图像绘制到HTML画布。

它在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>

结果是：

enter image description here

我希望在Firefox中不使用像素化绘制调整大小的SVG图像，如Chromium。

目前，我在画布上放置了<img/>以获得没有像素化的SVG图像，但由于存在大量图像，所以它非常慢。

Answer 1

我终于找到了一种在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);

这是一个jsFiddle（没有AJAX但很容易改变）。

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

它适用于Chromium，Firefox和Opera（但由于某些原因，这个小提琴在Opera中不起作用，尽管它在我的开发服务器中有效）。

P.S。：如果有document.createElementNS的jQuery替代品，我想知道。

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

1 个答案: