5

我想将调整大小的 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>

结果是：

在此处输入图像描述

我想在 Firefox 中绘制没有像素化的调整大小的 SVG 图像，就像在 Chromium 中一样。

目前，我将<img/>画布放在画布上以获得没有像素化的SVG图像，但是由于图像很多，所以速度很慢。

4

1 回答 1

5

我终于找到了一种在 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 中不起作用，尽管它适用于我的开发服务器）。

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

于 2013-06-02T00:11:53.083 回答