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-to-image 我遇到的错误）。

此外，html2canvas 在可以描述为出现的“阴影”遮罩叠加层（不知道为什么会创建它们）和任意裁剪方面也存在错误。

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

React component export (html2canvas) to PNG misses all SVG icons

svg

export

html2canvas

reactjs