SVG 颜色在使用 dom-to-image 插件时变黑

Question

我需要将以下 SVG 导出为 pdf 的情况，所以我使用的是 NPM 插件目录中列出的 dom-to-image 插件。所以问题是当我尝试将以下 SVG 导出为图像时，SVG 的颜色变黑。

我尝试了 dom-to-image 选项中列出的一些选项，但这些选项适用于我尝试导出的 SVG 位于其子节点中的父节点。

HTML：

<div id="foo"><svg class="cone" viewBox="-25 0 1175 1419" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Canvas" transform="translate(19600 8843)">
<g id="Group 5">
<g id="Group 6">
<g id="Group 5">
<g id="Vector 3.4">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path10_fill" transform="translate(-19604.5 -7783)" fill="#3596ff">
</use>
</g>
</g>
</g>
</g>
</g>
<defs>
<path id="path10_fill" d="M 0 208L 85 0C 230.833 82 623.9 196.8 1047.5 0L 1138 208C 842 441.5 137 369.5 0 208Z">
</path>
</defs>
</svg>
</div>

JavaScript：

const render = node =>
  domtoimage.toPng(node)
  .then(dataUrl => {
  console.log(performance.now()-pf)
    const img = new Image();
    img.src = dataUrl;
    $('body').append(img);
  })
  .catch(error =>
    console.error('oops, something went wrong!', error)
  );
const foo = document.getElementById('foo');
var pf=performance.now();
render(foo);

小提琴链接

注意：请在输出部分向下滚动以查看结果。

Answer 1

插件

可能无法识别<use>标签。如果要使用多个路径，只需将fill="#3596ff"更改为<svg>标记或<path>标记即可。