javascript - Safari createPattern 失败并显示 SVG : suggestions for alternatives?

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，是否有任何其他替代方法可以将图像加载到 Canvas 中的不规则形状(多边形)中，充当背景图像？

Answer 1

可能的解决方法

您可以尝试先通过 Canvas 从 SVG 创建位图图像，然后将该 Canvas 用作图案的图像源:

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';