如何在dom中的React-pdf文档中渲染svg徽标？

Question

我有一个项目，我正在使用 React-pdf 生成文档。我想向此文档添加 SVG 徽标。根据React-pdf文档，他们有一个名为Svg的元素，它是一个定义新坐标系和视口的容器，它被用作SVG文档的最外层元素。据我了解，我应该以某种方式将普通的 svg 转换为 React-pdf 使用的元素类型，以便使其工作？（如果是这样，我怎样才能做到这一点？我可以使用某种外部库吗？）。我的代码如下（现在它给了我一个错误，因为我无法使用 React-pdf 中的图像来渲染 svg。如果我将 Image 元素与格式为 .jpeg 或 .png 的图像的 src 一起使用，它就可以工作。

import {
  Page,
  Text,
  View,
  Document,
  StyleSheet,
  Image,
  Svg,
  PDFViewer,
} from "@react-pdf/renderer";

...
  return (
    <div>
      <PDFViewer style={{ width: "98vw", height: "98vh" }}>
        <Document title="TITLE" author="AUTHOR">
          <Page size="A4" style={styles.page}>
            <View style={styles.section}>
              <Svg>
                <Image src={logoUrl} style={styles.logo} />
              </Svg>
              <Text>My PDF</Text>
            </View>
          </Page>
        </Document>
      </PDFViewer>
    </div>
  );
...

Answer 1

您将需要使用实际的 svg 代码和任何 svg 相关标签。这里都记录得很好： https: //react-pdf.org/svg

反应中的示例：

import React from 'react';
import {
  Svg,
  Polygon,
  Rect,
  Page,
  Document,
} from '@react-pdf/renderer';

const ExampleSvg = () => (
  <Svg width="200" height="200" viewBox="-100 -100 200 250">
    <Polygon points="0,0 80,120 -80,120" fill="#234236" />
    <Polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
    <Polygon points="0,-80 40,0 -40,0" fill="#38755B" />
    <Rect x="-20" y="120" width="40" height="30" fill="#A32B2D" />
  </Svg>
);

const PdfToShow = () => (
  <Document>
    <Page size="A4">
      <ExampleSvg />
    </Page>
  </Document>
);

export default PdfToShow;

Answer 2

这是非常旧的，但是，据我所知，react pdf 中的元素需要实际的 svg 代码，您给出的 img 标签是无效的。