Safari 错误地通过 HTML5 Canvas 在 SVG 上绘制阴影

如何解决Safari 错误地通过 HTML5 Canvas 在 SVG 上绘制阴影

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

1. Safari 在 SVG 中的每个单独的形状上绘制阴影
2. Safari 裁剪掉超出 SVG 边界的部分阴影

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

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'red'

var image = new Image();
image.src = 'https://storage.googleapis.com/card-conjurer/img/manaSymbols/0.svg';
image.onload = function() {
    context.drawImage(image,10,100,100);
}

<canvas id='canvas'></canvas>

我还不能嵌入图片，但这里有一些图片链接可以说明问题：

• SVG Shadows with Google Chrome
• SVG Shadows with Safari

（它们是上面代码的截图）

Safari 的结果……非常难看，如您所见。有没有办法让 Safari 像 Chrome 一样在 HTML5 画布上渲染带有阴影的 SVG？

任何帮助将不胜感激。 非常感谢您的时间！

解决方法

这是一个错误，您应该将其报告给 webkit's bug-tracker。

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

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();
image.src = 'https://storage.googleapis.com/card-conjurer/img/manaSymbols/0.svg';
image.onload = function() {
  const off = canvas.cloneNode();
  off.getContext('2d').drawImage(image,10,100,100);
  context.shadowOffsetX = 10;
  context.shadowOffsetY = 10;
  context.shadowColor = 'red';
  context.drawImage(off,0);
}

<canvas id='canvas'></canvas>

为了使用单个画布，我们需要使用偏移技巧，但这并不总是那么容易，因为它需要清楚地知道我们绘图的位置：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();
image.src = 'https://storage.googleapis.com/card-conjurer/img/manaSymbols/0.svg';
image.onload = function() {
  // first pass without shadow
  context.drawImage(image,100);
  // set shadow offsets to the position in page of bottom-right corner
  context.shadowOffsetX = 10 + 110;
  context.shadowOffsetY = 10 + 110;
  context.shadowColor = 'red';
  // draw behind
  context.globalCompositeOperation = "destination-over";
  // draw with inverse offset,so that the image is not visible
  // but the shadow is in-screen
  context.drawImage(canvas,-110,-110);
}

<canvas id='canvas'></canvas>