javascript - Safari 中的 html2canvas 不在 SVG 路径上呈现 Javascript style.fill

Question

我正在尝试解决这个问题:在 Apple Safari 中，我的 <div id="wrap">正在使用 html2canvas 按预期正确呈现，但任何 SVG 路径除外，例如<path id="test">我已经使用 Javscript 进行了修改:

document.getElementById('test').style.fill = 'blue';

PNG 文件在 Mac 和 PC 上的 Firefox 和 Chrome 中都能正确下载。但是，在 Safari 中(在台式机和移动设备上)，PNG 文件将被原封不动地下载。

我想不出如何在 Safari 中实现这一点。

我在遵循我在我的网站上使用的基本原则的同时创建了这个示例:

1. 网站显示黑色三 Angular 形。
2. 点击“点击我!”路径填充为“蓝色”，正在下载 PNG。

在 Safari 上，下载的 PNG 文件显示一个黑色三 Angular 形，而在所有其他浏览器上，PNG 文件显示屏幕上显示的蓝色三 Angular 形。

这是我使用 html2canvas.min.js library 的示例:

function saveCanvas() {
  document.getElementById('test').style.fill = 'blue';
  html2canvas(document.querySelector("#wrap"))
    .then(canvas => {
      var image = canvas.toDataURL("image/png")
          .replace("image/png", "image/octet-stream");
      var a = document.createElement('a');
      a.href = image;
      a.download = 'image.png';
      a.click();
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<div id="wrap">
  <svg height="210" width="400">
    <path id="test" d="M150 0 L75 200 L225 200 Z" />
  </svg>
</div>
<div onclick="saveCanvas();"> Click Me!</div>

Answer 1

https://github.com/niklasvh/html2canvas/issues/1543

// Not working.
$('#canvas svg .BODY').css('fill', 'blue');
// Working.
$('#canvas svg').append('<style type="text/css">.BODY{fill:blue;}</style>');