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);

Fiddle Link

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

Answer 1

该插件可能无法识别<use>标记。如果您要使用多条路径，则可以将fill="#3596ff"更改为<svg>代码或<path>代码。

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

1 个答案: