我正在尝试解决这个问题:在 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 中实现这一点。
我在遵循我在我的网站上使用的基本原则的同时创建了这个示例:
- 网站显示黑色三 Angular 形。
- 点击“点击我!”路径填充为“蓝色”,正在下载 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>
最佳答案
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>');
关于javascript - Safari 中的 html2canvas 不在 SVG 路径上呈现 Javascript style.fill,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64016207/