React组件导出(html2canvas)到PNG会丢失所有SVG图标

Question

在我的React应用程序中，我使用material UI (material-ui.com)和SVG图标。当我尝试使用react-component-export-image将包括SVG图标的组件导出到PDF时，所有SVG图标都丢失了。

SVG图标的定义如下：

// autogenerated from icon svg file "icons/Screenshot.svg", do not edit;
import * as React from 'react';
import { SvgIcon, SvgIconProps } from '@material-ui/core';
export const ScreenshotIcon = (props: SvgIconProps) => <SvgIcon {...props}><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 21H7v-1h10v1zm0-3H7V6h10v12zm0-14H7V3h10v1zM9.5 8.5H12V7H8v4h1.5V8.5zM12 17h4v-4h-1.5v2.5H12V17z" /></SvgIcon>;
export default ScreenshotIcon;

我遗漏了什么，SVG图标不能被渲染？

Answer 1

简单的解决方案是:改用html-to-image，它开箱即用，带有SVG图标，但也适用于更复杂的场景(我在这里问的只是我遇到的一系列html-to-image bug中的第一个)。

此外，html-to-image在出现“阴影”遮罩(不知道为什么要创建它们)和任意裁剪方面也有缺陷。