Javascript Safari通过HTML5画布错误地在SVG上绘制阴影

我在一个项目中使用HTML5画布，偶尔需要在画布中的SVG上绘制阴影。我注意到，与Chrome相比，Safari在执行此操作时做了两件错误的事情：

Safari在SVG中的每个单独形状上绘制阴影

Safari从超出SVG边界的阴影部分进行裁剪

以下代码可以说明这些问题：

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
context.shadowOffsetX=10；
context.shadowOffsetY=10；
context.shadowColor='red'
var image=新图像（）；
image.src=https://storage.googleapis.com/card-conjurer/img/manaSymbols/0.svg';
image.onload=函数（）{
drawImage（图像，10,10,100,100）；
}

---

这是一个bug，你应该报告给

尽管您可以通过首先在第二个画布上绘制图像来解决此问题，只需光栅化该svg图像并将该画布用作阴影的源：

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var image=新图像（）；
image.src=https://storage.googleapis.com/card-conjurer/img/manaSymbols/0.svg';
image.onload=函数（）{
const off=canvas.cloneNode（）；
off.getContext（'2d'）.drawImage（图像，10，10，100，100）；
context.shadowOffsetX=10；
context.shadowOffsetY=10；
context.shadowColor='red'；
context.drawImage（关闭，0，0）；
}

---

这是一个bug，你应该报告给

尽管您可以通过首先在第二个画布上绘制图像来解决此问题，只需光栅化该svg图像并将该画布用作阴影的源：

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var image=新图像（）；
image.src=https://storage.googleapis.com/card-conjurer/img/manaSymbols/0.svg';
image.onload=函数（）{
const off=canvas.cloneNode（）；
off.getContext（'2d'）.drawImage（图像，10，10，100，100）；
context.shadowOffsetX=10；
context.shadowOffsetY=10；
context.shadowColor='red'；
context.drawImage（关闭，0，0）；
}