Question

我使用SVG图像作为HTML5 canvas元素的背景图案，使用以下语法：

var img = new Image();
img.onload = function() {
    var pattern = badge.createPattern(img, 'repeat');
    badge.fillStyle = pattern;
    // draw 'badge' shape
    badge.fill();
    };  
img.src = '../flags/iso/'+country+'.svg';

这在Firefox和Chrome中可以正常使用，但在Safari（7.0.3）中，背景为空白（白色）。使用png或jpg作为背景图像可以在Safari等人的预期工作 - 它只是错误渲染的SVG。

任何指针都感激不尽。还有许多其他关于Safari SVG漏洞的报告，但我不确定这是否特定于此，或与Canvas实现有关。

更新：这是a previously reported bug in Safari，但似乎没有采取任何措施。问题是使用SVG来创建模式。

如果Safari无法使用createPattern加载SVG，是否有其他替代方法可以将图像加载到画布中的不规则形状（多边形）中，作为背景图像？

Answer 1

可能的解决方法

您可以尝试首先通过画布从SVG创建位图图像，然后使用该画布作为图案的图像源：

var img = new Image();
img.onload = function() {

    // canvas image source for pattern:    
    var svgCanvas = document.createElement("canvas");
    svgCanvas.width = this.width;
    svgCanvas.height = this.height;

    // draw in the SVG to canvas
    var svgCtx = svgCanvas.getContext("2d");
    svgCtx.drawImage(this, 0, 0, this.width, this.height);

    // use canvas as image source instead
    var pattern = badge.createPattern(svgCanvas, 'repeat');
    badge.fillStyle = pattern;

    // draw 'badge' shape
    badge.fill();
};  
img.src = '../flags/iso/'+country+'.svg';

Safari createPattern失败了SVG：替代方案的建议？

1 个答案:

可能的解决方法