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

【问题标题】：SVG color gets black when using dom-to-image plugin使用 dom-to-image 插件时 SVG 颜色变黑
【发布时间】：2018-05-01 00:58:46
【问题描述】：

我需要将以下 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);

Fiddle Link

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

【问题讨论】：

标签： javascript html image reactjs svg

【解决方案1】：

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

【讨论】：