Safari使用SVG创建图案失败：有哪些替代方案建议？

Question

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

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实现有关。

更新：这是 Safari中以前报告过的一个错误，但似乎没有采取行动。问题是使用SVG创建模式。

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

- stml

---

您可以在此处报告Safari漏洞：https://bugs.webkit.org/enter_bug.cgi?product=WebKit&component=SVG - Robert Longson

@robert-longson - 谢谢，我发现这个问题在2010年被报告，但至今未得到处理：https://bugs.webkit.org/show_bug.cgi?id=45277 - stml

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

- user1693593

---

非常好用，谢谢。这也解决了我在调整背景图片大小方面遇到的问题，所以再次感谢。 - stml