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

Question

我在一个项目中使用 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, 10, 100, 100);
}

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

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

• SVG Shadows with Google Chrome
• SVG Shadows with Safari

（是上面代码的截图）

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

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

Answer 1

这是一个错误，你应该报告给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, 10, 100, 100);
  context.shadowOffsetX = 10;
  context.shadowOffsetY = 10;
  context.shadowColor = 'red';
  context.drawImage(off, 0, 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, 10, 10, 100, 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>