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

Question

我在项目中使用 HTML5 canvas，偶尔需要在 canvas 内的 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 = 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 canvas 上渲染带阴影的 SVG？

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

Answer 1

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

虽然您可以通过先在第二个上绘制图像来解决它 canvas 只是为了光栅化该 svg 图像并将该 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() {
  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>

为了使用单个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>

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

Safari incorrectly drawing shadows on SVGs via HTML5 Canvas

javascript

safari

svg

dropshadow

html5-canvas